feat: Packet Queue Usage Progress Bar (#185)

This pull request introduces a new progress bar feature to the
`DeviceInfo` class and updates related files to support this
functionality. The most important changes include the addition of the
`ProgressBar` component, modifications to the `DeviceInfo` class to
include the progress bar, and the necessary CSS styles.

### New Progress Bar Feature:

* **Progress Bar Component**:
- Added a new `ProgressBar` class in
`src/graphics/renderables/progress_bar.ts` to create and manage the
progress bar element.
- Introduced `ProgressBarProps` interface to define the properties of
the progress bar.

* **DeviceInfo Class Updates**:
- Updated `DeviceInfo` class in
`src/graphics/renderables/device_info.ts` to include a method
`addProgressBar` for adding a progress bar with a label.
- Imported `ProgressBar` and `TooltipManager` in
`src/graphics/renderables/device_info.ts`.

### CSS Styles for Progress Bar:

* **Progress Bar Styles**:
- Added new CSS styles in `src/styles/progress-bar.css` to style the
progress bar container, bar, and text.
  
  
  - Included the new CSS file in `src/styles/index.ts`.

### ViewRouter Class Updates:

* **Queue Size and Progress Bar Integration**:
- Modified `ViewRouter` class in `src/types/view-devices/vRouter.ts` to
add a progress bar showing packet queue usage.
- Implemented observer pattern in `PacketQueue` class to notify changes
in queue size and update the progress bar accordingly.
[[1]](diffhunk://#diff-221c2585585eef7ff9eafd84467d1c0bcef658af348a8673d2d00f752d06e35aR273-R299)
[[2]](diffhunk://#diff-221c2585585eef7ff9eafd84467d1c0bcef658af348a8673d2d00f752d06e35aR311)
[[3]](diffhunk://#diff-221c2585585eef7ff9eafd84467d1c0bcef658af348a8673d2d00f752d06e35aR321)

### Tooltip Updates:

* **Tooltip Constants**:
- Added new tooltip keys and content for the packet queue usage in
`src/utils/constants/tooltips_constants.ts`.
[[1]](diffhunk://#diff-d23a6aa67e252dd864d40b8b3b4cc29db716b0e742da79d7ef8da9b9dc956ce1R48)
[[2]](diffhunk://#diff-d23a6aa67e252dd864d40b8b3b4cc29db716b0e742da79d7ef8da9b9dc956ce1R132-R133)
  
related #173

Author: pgallino

src/graphics/renderables/device_info.ts

@@ -10,6 +10,8 @@ import { ProgramInfo } from "./program_info";
 import { ProgramRunnerInfo } from "./program_runner_info";
 import { StyledInfo } from "./styled_info";
 import { createParameterGroup } from "./parameter_editor";
+import { ProgressBar } from "./progress_bar";
+import { TooltipManager } from "./tooltip_manager";
 
 export { ProgramInfo } from "./program_info";
 
@@ -104,6 +106,43 @@ export class DeviceInfo extends StyledInfo {
     this.inputFields.push(toggleButton);
     this.inputFields.push(borderedContainer);
   }
+
+  /**
+   * Adds a progress bar with a label above it.
+   * @param label - The text of the label to be displayed above the progress bar.
+   * @param current - The current value of the progress bar.
+   * @param max - The maximum value of the progress bar.
+   * @param subscribe - A function that subscribes to changes in the progress bar.
+   */
+  addProgressBar(
+    label: string,
+    current: number,
+    max: number,
+    subscribe: (progressBar: ProgressBar) => void,
+  ): void {
+    // Create the container for the label and the progress bar
+    const container = document.createElement("div");
+    container.className = "progress-bar-wrapper";
+
+    // Create the label
+    const labelElement = document.createElement("div");
+    labelElement.className = "progress-bar-label";
+    labelElement.textContent = label;
+    TooltipManager.getInstance().attachTooltip(labelElement, label);
+
+    // Create the progress bar
+    const progressBar = new ProgressBar({ current, max });
+
+    // Add the progress bar to the container
+    container.appendChild(labelElement);
+    container.appendChild(progressBar.render());
+
+    // Add the container to the input fields
+    this.inputFields.push(container);
+
+    // Subscribe to changes in the progress bar
+    subscribe(progressBar);
+  }
 }
 
 function getTypeName(device: ViewDevice): string {

src/graphics/renderables/progress_bar.ts

@@ -0,0 +1,38 @@
+export interface ProgressBarProps {
+  current: number; // Current size of the queue
+  max: number; // Maximum size of the queue
+}
+
+export class ProgressBar {
+  private container: HTMLElement;
+  private progress: HTMLElement;
+  private text: HTMLElement;
+
+  constructor(props: ProgressBarProps) {
+    this.container = document.createElement("div");
+    this.container.className = "progress-bar-container";
+
+    this.progress = document.createElement("div");
+    this.progress.className = "progress-bar";
+
+    this.text = document.createElement("div");
+    this.text.className = "progress-bar-text";
+
+    this.container.appendChild(this.progress);
+    this.container.appendChild(this.text);
+    this.update(props.current, props.max);
+  }
+
+  // Updates the progress of the bar
+  update(current: number, max: number): void {
+    const fraction = `${current}/${max} bytes`; // Format as fraction
+    const percentage = Math.min((current / max) * 100, 100); // Limit 100%
+    this.progress.style.width = `${percentage}%`; // Updates the width of the green bar
+    this.text.textContent = fraction; // Updates the text to show the fraction
+  }
+
+  // Returns the HTML container of the component
+  render(): HTMLElement {
+    return this.container;
+  }
+}

src/styles/index.ts

@@ -16,3 +16,4 @@ import "./config.css";
 import "./tooltips.css";
 import "./dropdown.css";
 import "./parameter_editor.css";
+import "./progress-bar.css";

src/styles/progress-bar.css

@@ -0,0 +1,71 @@
+/* Progress bar container */
+.progress-bar-container {
+  width: 100%;
+  height: 25px; /* Height of the bar */
+  background-color: #f3f3f3; /* Light gray background */
+  border: 1px solid #dcdcdc; /* Lighter border */
+  border-radius: 10px; /* Rounded corners */
+  overflow: hidden; /* Hides overflowing content */
+  position: relative; /* Necessary for positioning the text */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+/* Progress bar */
+.progress-bar {
+  height: 100%; /* Full height of the container */
+  background: linear-gradient(90deg, #4caf50, #81c784); /* Green gradient */
+  width: 0%; /* Initial width */
+  transition:
+    width 0.4s ease-in-out,
+    background-color 0.3s ease; /* Smooth animation */
+}
+
+/* Centered text */
+.progress-bar-text {
+  position: absolute; /* Positions the text over the container */
+  top: 50%; /* Vertically centers */
+  left: 50%; /* Horizontally centers */
+  transform: translate(-50%, -50%); /* Adjusts for full centering */
+  color: black; /* Black text */
+  font-size: 0.9rem; /* Font size */
+  font-weight: bold; /* Bold text */
+  pointer-events: none; /* Prevents text from interfering with events */
+  z-index: 1; /* Ensures the text is above the green bar */
+}
+
+/* Glow effect on the progress bar */
+.progress-bar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 255, 255, 0)
+  );
+  opacity: 0.5;
+  pointer-events: none;
+  transform: translateX(-100%);
+  animation: shine 2s infinite linear; /* Glow effect */
+}
+
+/* Progress bar and its label container */
+.progress-bar-wrapper {
+  display: flex;
+  padding: auto;
+  flex-direction: column; /* Places the label above the bar */
+  margin-bottom: 10px; /* Bottom spacing */
+}
+
+/* Progress bar label */
+.progress-bar-label {
+  font-weight: bold;
+  color: #000000; /* Changes the text color to black */
+  margin-bottom: 10px; /* Spacing between the label and the input */
+  flex: 1; /* The label takes up the remaining space */
+  text-align: center; /* Aligns the label text to the center */
+  overflow: hidden; /* Hides text that doesn't fit */
+}

src/types/data-devices/dRouter.ts

@@ -177,7 +177,7 @@ class PacketQueue {
   }
 
   enqueue(packet: IPv4Packet) {
-    if (this.queueSizeBytes >= this.maxQueueSizeBytes) {
+    if (this.queueSizeBytes + packet.totalLength > this.maxQueueSizeBytes) {
       return false;
     }
     this.queue.push(packet);

src/types/view-devices/vRouter.ts

@@ -57,6 +57,21 @@ export class ViewRouter extends ViewNetworkDevice {
 
     info.addEmptySpace();
 
+    info.addProgressBar(
+      TOOLTIP_KEYS.PACKET_QUEUE_USAGE,
+      this.packetQueue.getCurrentSize(),
+      this.packetQueue.getMaxQueueSize(),
+      (progressBar) => {
+        // Suscribe
+        this.packetQueue.subscribe(() => {
+          progressBar.update(
+            this.packetQueue.getCurrentSize(),
+            this.packetQueue.getMaxQueueSize(),
+          );
+        });
+      },
+    );
+
     info.addParameterGroup(TOOLTIP_KEYS.ROUTER_PARAMETERS, [
       {
         label: TOOLTIP_KEYS.PACKET_QUEUE_SIZE_PARAMETER,
@@ -254,27 +269,45 @@ class PacketQueue {
   private queueSizeBytes = 0;
   private maxQueueSizeBytes: number;
 
+  private observers: (() => void)[] = [];
+
   constructor(maxQueueSizeBytes: number) {
     this.maxQueueSizeBytes = maxQueueSizeBytes;
   }
 
+  // Método para suscribirse a cambios
+  subscribe(observer: () => void): void {
+    this.observers.push(observer);
+  }
+
+  // Método para notificar a los observadores
+  private notifyObservers(): void {
+    this.observers.forEach((observer) => observer());
+  }
+
+  getCurrentSize(): number {
+    return this.queueSizeBytes;
+  }
+
   getMaxQueueSize(): number {
     return this.maxQueueSizeBytes;
   }
   setMaxQueueSize(newSize: number) {
     if (newSize >= 0) {
       this.maxQueueSizeBytes = newSize;
+      this.notifyObservers();
     } else {
       console.warn("Invalid queue size, keeping previous value");
     }
   }
 
   enqueue(packet: IPv4Packet) {
-    if (this.queueSizeBytes >= this.maxQueueSizeBytes) {
+    if (this.queueSizeBytes + packet.totalLength > this.maxQueueSizeBytes) {
       return false;
     }
     this.queue.push(packet);
     this.queueSizeBytes += packet.totalLength;
+    this.notifyObservers();
     return true;
   }
 
@@ -284,6 +317,7 @@ class PacketQueue {
     }
     const packet = this.queue.shift();
     this.queueSizeBytes -= packet.totalLength;
+    this.notifyObservers();
     return packet;
   }
 

src/utils/constants/tooltips_constants.ts

@@ -45,6 +45,7 @@ export const TOOLTIP_KEYS = {
   HOST_PARAMETERS: "Host Parameters",
   PACKET_QUEUE_SIZE_PARAMETER: "Packet queue size (bytes)",
   PROCESSING_SPEED_PARAMETER: "Processing speed (ms/byte)",
+  PACKET_QUEUE_USAGE: "Packet Queue Usage",
 } as const;
 
 // Tooltip Content
@@ -128,4 +129,6 @@ export const TOOLTIP_CONTENT = {
     "The maximum size of the packet queue in bytes. This parameter determines how many packets can be stored in the queue before they are processed.",
   [TOOLTIP_KEYS.PROCESSING_SPEED_PARAMETER]:
     "The time taken to process a single byte of data. This parameter affects the speed at which packets are processed and sent.",
+  [TOOLTIP_KEYS.PACKET_QUEUE_USAGE]:
+    "The progress bar visually represents the percentage of the queue currently occupied by packets waiting to be processed",
 } as const;