Ipv4 header data (#80)

This pull request introduces new functionality to display detailed
information about packets in the right sidebar. The changes include
adding a toggle button to show/hide packet details, creating a new
function to generate the toggle information, and updating the styles to
support the new feature.

Key changes:

**Functionality enhancements:**
*
[`src/graphics/right_bar.ts`](diffhunk://#diff-2ffc3b298d27be79ce1fc85f908ca77f488f67ee59e05d3d17b8a9e1aad6d696R77-R90):
Added `addToggleButton` method to `RightBar` class to append a toggle
button for displaying packet details.
*
[`src/graphics/right_bar.ts`](diffhunk://#diff-2ffc3b298d27be79ce1fc85f908ca77f488f67ee59e05d3d17b8a9e1aad6d696R161-R218):
Added `createToggleInfo` function to create a container with a toggle
button and detailed information list.
*
[`src/types/packet.ts`](diffhunk://#diff-e546d6337dcb4e908b738659b527f00387c07ab30674ab0dfbd61edab3d03ff4R86-R134):
Added `getPacketDetails` method to `Packet` class to generate a
dictionary of packet details.
*
[`src/types/packet.ts`](diffhunk://#diff-e546d6337dcb4e908b738659b527f00387c07ab30674ab0dfbd61edab3d03ff4R155-R170):
Updated `showInfo` method in `Packet` class to include the toggle button
for packet details.

**Styling updates:**
*
[`src/styles/index.ts`](diffhunk://#diff-701113bd02bdc9f8c671df93b0a5a0d2dadb520ae378674c8cfa956d1eb2daffR8):
Imported new stylesheet `info.css` for the toggle info container.
*
[`src/styles/info.css`](diffhunk://#diff-491a767362663fa382b6668f53918a33594c6cff6f34f616a22ae85b4dfbac53R1-R41):
Added styles for the toggle info container and its elements, including
transitions for a smoother user experience.

Author: V-SANT

src/graphics/right_bar.ts

@@ -74,6 +74,20 @@ export class RightBar {
     }
   }
 
+  addToggleButton(
+    title: string,
+    details: Record<string, string | number | object>,
+    buttonClass = "right-bar-toggle-button",
+    infoClass = "right-bar-info",
+  ) {
+    const container = createToggleInfo(title, details, buttonClass, infoClass);
+    const infoContent = document.getElementById("info-content");
+
+    if (infoContent) {
+      infoContent.appendChild(container);
+    }
+  }
+
   // Adds a select dropdown to the right-bar
   addDropdown(
     label: string,
@@ -144,6 +158,64 @@ export function createToggleTable(
   return container;
 }
 
+export function createToggleInfo(
+  title: string,
+  details: Record<string, string | number | object>,
+  buttonClass = "right-bar-toggle-button",
+  infoClass = "right-bar-info",
+) {
+  const container = document.createElement("div");
+  container.classList.add("toggle-info-container");
+
+  // Create toggle button
+  const button = document.createElement("button");
+  button.classList.add(buttonClass);
+  button.textContent = "Show Details";
+
+  // Create Packet Details title
+  const header = document.createElement("h3");
+  header.classList.toggle("hidden", true);
+  header.textContent = title;
+
+  // Create info list
+  const list = document.createElement("ul");
+  list.classList.add(infoClass, "hidden");
+
+  // Add details to the list
+  Object.entries(details).forEach(([key, value]) => {
+    const listItem = document.createElement("li");
+    if (key === "Payload") {
+      // Format the payload as JSON
+      const pre = document.createElement("pre");
+      pre.textContent = JSON.stringify(value, null, 2); // Pretty-print JSON
+      listItem.innerHTML = `<strong>${key}:</strong>`;
+      listItem.appendChild(pre);
+    } else {
+      listItem.innerHTML = `<strong>${key}:</strong> ${value}`;
+    }
+    list.appendChild(listItem);
+  });
+
+  // Toggle when clicking on button
+  button.onclick = () => {
+    const isHidden = list.classList.contains("hidden");
+    list.classList.toggle("hidden", !isHidden);
+    list.classList.toggle("open", isHidden);
+    container.classList.toggle("hidden", !isHidden);
+    container.classList.toggle("open", isHidden);
+    button.classList.toggle("open", isHidden);
+    header.classList.toggle("hidden", !isHidden);
+    button.textContent = isHidden ? "Hide Details" : "Show Details";
+  };
+
+  // Add elements to container
+  container.appendChild(button);
+  container.appendChild(header);
+  container.appendChild(list);
+
+  return container;
+}
+
 export function createRightBarButton(
   text: string,
   onClick: () => void,

src/styles/index.ts

@@ -5,4 +5,5 @@ import "./canvas.css";
 import "./right-bar.css";
 import "./right-bar-buttons.css";
 import "./table.css";
+import "./info.css";
 import "./buttons.css";

src/styles/info.css

@@ -0,0 +1,41 @@
+/* Estilos base para el contenedor */
+.toggle-info-container {
+  overflow: hidden;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+}
+
+/* Ajustes para el texto de la lista */
+.toggle-info-container .right-bar-info {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.toggle-info-container .right-bar-info li {
+  margin: 20px 0px;
+  padding: 0;
+  text-align: flex;
+}
+
+/* Estilo para el pre que contiene el payload */
+.toggle-info-container .right-bar-info li pre {
+  background-color: #000;
+  color: #fff;
+  padding: 10px;
+  border-radius: 4px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+/* Elementos abiertos */
+.toggle-info-container .right-bar-info.open {
+  display: block;
+}
+
+/* Transiciones para una experiencia más fluida */
+.toggle-info-container .hidden {
+  display: none;
+}

src/types/packet.ts

@@ -11,7 +11,7 @@ import { RightBar, StyledInfo } from "../graphics/right_bar";
 import { Position } from "./common";
 import { ViewGraph } from "./graphs/viewgraph";
 import { EmptyPayload, IpAddress, IPv4Packet } from "../packets/ip";
-import { EchoRequest } from "../packets/icmp";
+import { EchoRequest, EchoReply } from "../packets/icmp";
 import { DeviceId, isRouter } from "./graphs/datagraph";
 
 const contextPerPacketType: Record<string, GraphicsContext> = {
@@ -31,6 +31,7 @@ export class Packet extends Graphics {
   type: string;
   sourceId: number;
   destinationId: number;
+  private detailsVisible = false;
 
   rawPacket: IPv4Packet;
 
@@ -82,8 +83,55 @@ export class Packet extends Graphics {
     this.removeHighlight();
   }
 
+  private getPacketDetails(packet: IPv4Packet) {
+    // Creates a dictionary with the data of the packet
+    const packetDetails: Record<string, string | number | object> = {
+      Version: packet.version,
+      "Internet Header Length": packet.internetHeaderLength,
+      "Type of Service": packet.typeOfService,
+      "Total Length": packet.totalLength,
+      Identification: packet.identification,
+      Flags: packet.flags,
+      "Fragment Offset": packet.fragmentOffset,
+      "Time to Live": packet.timeToLive,
+      Protocol: packet.protocol,
+      "Header Checksum": packet.headerChecksum,
+    };
+
+    // Add payload details if available
+    if (packet.payload instanceof EchoRequest) {
+      const echoRequest = packet.payload as EchoRequest;
+      packetDetails.Payload = {
+        type: "EchoRequest",
+        identifier: echoRequest.identifier,
+        sequenceNumber: echoRequest.sequenceNumber,
+        data: Array.from(echoRequest.data),
+      };
+    } else if (packet.payload instanceof EchoReply) {
+      const echoReply = packet.payload as EchoReply;
+      packetDetails.Payload = {
+        type: "EchoReply",
+        identifier: echoReply.identifier,
+        sequenceNumber: echoReply.sequenceNumber,
+        data: Array.from(echoReply.data),
+      };
+    } else {
+      packetDetails.Payload = {
+        type: "Unknown",
+        protocol: packet.payload.protocol(),
+      };
+    }
+
+    return packetDetails;
+  }
+
   showInfo() {
     const rightbar = RightBar.getInstance();
+    if (!rightbar) {
+      console.error("RightBar instance not found.");
+      return;
+    }
+
     const info = new StyledInfo("Packet Information");
     info.addField("Type", this.type);
     info.addField("Source ID", this.sourceId.toString());
@@ -104,13 +152,22 @@ export class Packet extends Graphics {
       },
       "right-bar-delete-button",
     );
+
+    // Add a toggle info section for packet details
+    const packetDetails = this.getPacketDetails(this.rawPacket);
+
+    rightbar.addToggleButton("Packet Details", packetDetails);
   }
 
   highlight() {
     this.context = highlightedPacketContext;
   }
 
   removeHighlight() {
+    if (!this.context || !contextPerPacketType[this.type]) {
+      console.warn("Context or packet type context is null");
+      return;
+    }
     this.context = contextPerPacketType[this.type];
   }