Filter data between layers (#133)

This pull request includes significant refactoring and enhancements to
the packet handling and UI components in the project. The most important
changes include the introduction of a new `Layer` type, improvements to
the `createToggleInfo` function, and the addition of detailed packet
information based on network layers.

### Packet Handling Enhancements:

* Added a `Layer` type to represent different network layers and
integrated it into packet handling functions.
[[1]](diffhunk://#diff-8cfa69637400e5dcf458a21251cdc017dd839965ff80eabcd7b8c8753add795cR2-R5)
[[2]](diffhunk://#diff-994b9ef4337ca516e723b42da903ee81d4f40ebd6d763ba5901f85046fce3c26R2)
* Updated `IpPayload` and its implementations (`IcmpPacket`,
`TcpSegment`, `IPv4Packet`) to include a `getDetails` method that
returns detailed information based on the network layer.
[[1]](diffhunk://#diff-8cfa69637400e5dcf458a21251cdc017dd839965ff80eabcd7b8c8753add795cR56-R57)
[[2]](diffhunk://#diff-994b9ef4337ca516e723b42da903ee81d4f40ebd6d763ba5901f85046fce3c26R20-R23)
[[3]](diffhunk://#diff-994b9ef4337ca516e723b42da903ee81d4f40ebd6d763ba5901f85046fce3c26R127-R128)
[[4]](diffhunk://#diff-994b9ef4337ca516e723b42da903ee81d4f40ebd6d763ba5901f85046fce3c26R262-R301)
[[5]](diffhunk://#diff-31f0da4d2b4af8ea4de3ed7b0c5ca53c82fa6c81319c0f39314844bc7c89678dR183-R187)

### UI Component Improvements:

* Refactored `createToggleInfo` to use a configuration object and
modularized the creation of different types of detail elements (e.g.,
warning, payload, regular detail).
[[1]](diffhunk://#diff-2ffc3b298d27be79ce1fc85f908ca77f488f67ee59e05d3d17b8a9e1aad6d696L90-R95)
[[2]](diffhunk://#diff-2ffc3b298d27be79ce1fc85f908ca77f488f67ee59e05d3d17b8a9e1aad6d696L352-R413)
[[3]](diffhunk://#diff-2ffc3b298d27be79ce1fc85f908ca77f488f67ee59e05d3d17b8a9e1aad6d696L402-R461)
* Added new CSS styles for warning messages in the `info.css` file.

### Error Handling:

* Improved error handling in the `EchoServer` class by adding a check to
ensure the `echoProgram` is initialized before proceeding.

### Code Cleanup:

* Removed redundant code for packet details extraction and replaced it
with the new `getDetails` method.
[[1]](diffhunk://#diff-e546d6337dcb4e908b738659b527f00387c07ab30674ab0dfbd61edab3d03ff4L77-R79)
[[2]](diffhunk://#diff-e546d6337dcb4e908b738659b527f00387c07ab30674ab0dfbd61edab3d03ff4L146-R112)

Author: V-SANT

src/graphics/right_bar.ts

@@ -87,7 +87,12 @@ export class RightBar {
     buttonClass = "right-bar-toggle-button",
     infoClass = "right-bar-info",
   ) {
-    const container = createToggleInfo(title, details, buttonClass, infoClass);
+    const container = createToggleInfo({
+      title,
+      details,
+      buttonClass,
+      infoClass,
+    });
     const infoContent = document.getElementById("info-content");
 
     if (infoContent) {
@@ -371,57 +376,116 @@ function isValidInterface(interfaceStr: string): boolean {
   return interfacePattern.test(interfaceStr);
 }
 
-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");
+interface ToggleInfoConfig {
+  title: string;
+  details: Record<string, string | number | object>;
+  buttonClass?: string;
+  infoClass?: string;
+}
+
+// Function to create warning element
+function createWarningElement(key: string, value: string): HTMLLIElement {
+  const listItem = document.createElement("li");
+  const warningSign = document.createElement("div");
+  warningSign.classList.add("warning-sign");
+
+  const warningTitle = document.createElement("h3");
+  warningTitle.classList.add("warning-title");
+  warningTitle.textContent = key;
+
+  const warningMessage = document.createElement("p");
+  warningMessage.classList.add("warning-message");
+  warningMessage.textContent = String(value);
 
-  // Create toggle button
+  warningSign.appendChild(warningTitle);
+  warningSign.appendChild(warningMessage);
+  listItem.appendChild(warningSign);
+
+  return listItem;
+}
+
+// Function to create payload element
+function createPayloadElement(key: string, value: object): HTMLLIElement {
+  const listItem = document.createElement("li");
+  const pre = document.createElement("pre");
+  pre.textContent = JSON.stringify(value, null, 2); // Pretty-print JSON
+  listItem.innerHTML = `<strong>${key}:</strong>`;
+  listItem.appendChild(pre);
+
+  return listItem;
+}
+
+// Function to create regular detail element
+function createDetailElement(key: string, value: string): HTMLLIElement {
+  const listItem = document.createElement("li");
+  listItem.innerHTML = `<strong>${key}:</strong> ${value}`;
+  return listItem;
+}
+
+// Function to create toggle button
+function createInfoToggleButton(
+  buttonClass: string,
+  list: HTMLUListElement,
+  container: HTMLDivElement,
+  header: HTMLHeadingElement,
+): HTMLButtonElement {
   const button = document.createElement("button");
   button.classList.add(buttonClass);
   button.textContent = "Show Details";
 
-  // Create Packet Details title
+  button.onclick = () => {
+    const isHidden = list.classList.contains("hidden");
+
+    if (isHidden) {
+      list.classList.remove("hidden");
+      header.classList.remove("hidden");
+      button.textContent = "Hide Details";
+      button.classList.add("open");
+    } else {
+      list.classList.add("hidden");
+      header.classList.add("hidden");
+      button.textContent = "Show Details";
+      button.classList.remove("open");
+    }
+  };
+
+  return button;
+}
+
+// Main function to create toggle info
+export function createToggleInfo({
+  title,
+  details,
+  buttonClass = "right-bar-toggle-button",
+  infoClass = "right-bar-info",
+}: ToggleInfoConfig): HTMLDivElement {
+  const container = document.createElement("div");
+  container.classList.add("toggle-info-container");
+
   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
+  // Process details
   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);
+    let listItem: HTMLLIElement;
+
+    if (typeof value === "object" && value !== null) {
+      listItem = createPayloadElement(key, value);
+    } else if (key === "Warning") {
+      listItem = createWarningElement(key, value as string);
     } else {
-      listItem.innerHTML = `<strong>${key}:</strong> ${value}`;
+      listItem = createDetailElement(key, value as string);
     }
+
     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";
-  };
+  const button = createInfoToggleButton(buttonClass, list, container, header);
 
-  // Add elements to container
   container.appendChild(button);
   container.appendChild(header);
   container.appendChild(list);

src/packets/icmp.ts

@@ -1,4 +1,8 @@
 import { ICMP_PROTOCOL_NUMBER, IpPayload, computeIpChecksum } from "./ip";
+import { Layer } from "../types/devices/layer";
+
+const ICMP_WARNING =
+  "ICMP operates directly on top of IP at the Network layer, bypassing the Transport layer (TCP/UDP). This is because ICMP is primarily used for network diagnostics and error reporting, not for end-to-end data transport.";
 
 // More info in RFC-792
 //   0                   1                   2                   3
@@ -49,6 +53,8 @@ abstract class IcmpPacket implements IpPayload {
   getPacketType(): string {
     return `ICMP-${this.type}`;
   }
+
+  abstract getDetails(layer: Layer): Record<string, string | number | object>;
 }
 
 class EchoMessage extends IcmpPacket {
@@ -81,6 +87,27 @@ class EchoMessage extends IcmpPacket {
       ...this.data,
     ]);
   }
+
+  getDetails(layer: number): Record<string, string | number | object> {
+    if (layer == Layer.Transport) {
+      return {
+        Warning: ICMP_WARNING,
+      };
+    }
+
+    // TODO: If we decide to hide ICMP packets on Application layer, this should be removed
+    if (this.type == 8) {
+      return {
+        Application: "Ping",
+        Task: "Echo Request",
+      };
+    } else {
+      return {
+        Application: "Ping",
+        Task: "Echo Reply",
+      };
+    }
+  }
 }
 
 export class EchoRequest extends EchoMessage {

src/packets/ip.ts

@@ -1,4 +1,5 @@
 import { FramePayload, IP_PROTOCOL_TYPE } from "./ethernet";
+import { Layer } from "../types/devices/layer";
 
 // Taken from here: https://en.wikipedia.org/wiki/List_of_IP_protocol_numbers
 export const ICMP_PROTOCOL_NUMBER = 1;
@@ -16,6 +17,10 @@ export class EmptyPayload implements IpPayload {
   getPacketType(): string {
     return "EMPTY-PROTOCOL";
   }
+
+  getDetails() {
+    return {};
+  }
 }
 
 /// Internet Protocol (IP) address
@@ -119,6 +124,8 @@ export interface IpPayload {
   protocol(): number;
   // Packet protocol name
   getPacketType(): string;
+  // Get details of the payload
+  getDetails(layer: Layer): Record<string, string | number | object>;
 }
 
 // Info taken from the original RFC: https://datatracker.ietf.org/doc/html/rfc791#section-3.1
@@ -252,6 +259,44 @@ export class IPv4Packet implements FramePayload {
   type(): number {
     return IP_PROTOCOL_TYPE;
   }
+
+  getDetails(layer: Layer) {
+    // TODO: Refactor Packet Building Process
+    //
+    // Current Implementation:
+    // - Packet building starts at the Network layer
+    // - Frame payload data is directly included here
+    //
+    // Desired Implementation:
+    // - Move frame-specific data to EthernetFrame class
+    // - Implement packet sending using MAC addresses at device level
+    if (layer == Layer.Link) {
+      return {
+        "Ethernet Header": "---",
+        "Destination MAC": "---",
+        "Source MAC": "---",
+        EtherType: "0x0800",
+      };
+    }
+
+    if (layer == Layer.Network) {
+      return {
+        Version: this.version,
+        "Internet Header Length": this.internetHeaderLength,
+        "Type of Service": this.typeOfService,
+        "Total Length": this.totalLength,
+        Identification: this.identification,
+        Flags: this.flags,
+        "Fragment Offset": this.fragmentOffset,
+        "Time to Live": this.timeToLive,
+        Protocol: this.protocol,
+        "Header Checksum": this.headerChecksum,
+        Payload: this.payload,
+      };
+    } else {
+      return this.payload.getDetails(layer);
+    }
+  }
 }
 
 export function computeIpChecksum(octets: Uint8Array): number {

src/packets/tcp.ts

@@ -4,6 +4,7 @@ import {
   IpPayload,
   TCP_PROTOCOL_NUMBER,
 } from "./ip";
+import { Layer } from "../types/devices/layer";
 
 export class Flags {
   // Urgent Pointer field significant
@@ -179,6 +180,11 @@ export class TcpSegment implements IpPayload {
     return computeIpChecksum(totalBytes);
   }
 
+  // Dummy Method for the moment
+  getDetails(layer: Layer) {
+    return { Layer: layer };
+  }
+
   // ### IpPayload ###
   toBytes({
     withChecksum = true,

src/programs/echo_sender.ts

@@ -87,10 +87,14 @@ export class EchoServer extends ProgramBase {
     if (this.progress < delay) {
       return;
     }
-    this.echoProgram.run(() => {
-      // do nothing
-    });
-    this.progress -= delay;
+    this.progress += ticker.deltaMS * this.viewgraph.getSpeed();
+
+    if (this.progress >= delay) {
+      this.echoProgram.run(() => {
+        // Do nothing
+      });
+      this.progress -= delay;
+    }
   }
 
   protected _stop() {

src/styles/info.css

@@ -59,3 +59,35 @@
 .hidden {
   display: none;
 }
+
+/* Style for the warning sign container */
+.warning-sign {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid #ffcc3d;
+  border-radius: 8px;
+  margin: 10px 0;
+  overflow: hidden;
+  max-width: 300px;
+}
+
+/* Title style for the warning */
+.warning-sign .warning-title {
+  background-color: #ffcc3d;
+  color: #000;
+  font-weight: bold;
+  font-size: 20px;
+  padding: 5px;
+  margin: 0;
+  text-align: center;
+  width: 100%;
+}
+
+/* Message style for the warning */
+.warning-sign .warning-message {
+  padding: 10px;
+  margin: 0;
+  text-align: center;
+  font-size: 18px;
+  line-height: 1.4;
+}