Feat/add tooltips (#239)

This pull request introduces a tooltip management system across multiple
components and standardizes program names using constants. The most
significant changes include the addition of tooltip functionality for
various graphical elements, the use of centralized constants for program
names, and the cleanup of redundant tooltip methods in some classes.

### Tooltip Management Enhancements:
*
[`src/graphics/renderables/canvas_tooltip_manager.ts`](diffhunk://#diff-12514062324b37b274095f2071082bcd2246c86351737e85bcec26d0db7850d2R1-R72):
Added utility functions (`showTooltip`, `hideTooltip`, `removeTooltip`)
to manage tooltips, including creation, visibility toggling, and
removal.
*
[`src/types/edge.ts`](diffhunk://#diff-e56be54c8f80b249c61fe21bce40994324ca16c953bd58c6b8dd2d78ab64550cR11-R22):
Introduced hover-based tooltips for edges, displaying interface
information. Added methods like `setupHoverTooltip`, `showTooltips`, and
`removeTooltips` to manage tooltip behavior.
[[1]](diffhunk://#diff-e56be54c8f80b249c61fe21bce40994324ca16c953bd58c6b8dd2d78ab64550cR11-R22)
[[2]](diffhunk://#diff-e56be54c8f80b249c61fe21bce40994324ca16c953bd58c6b8dd2d78ab64550cR41-L43)
[[3]](diffhunk://#diff-e56be54c8f80b249c61fe21bce40994324ca16c953bd58c6b8dd2d78ab64550cR240-R321)
*
[`src/types/packet.ts`](diffhunk://#diff-e546d6337dcb4e908b738659b527f00387c07ab30674ab0dfbd61edab3d03ff4R93):
Added hover-based tooltips for packets, displaying packet type
information. Integrated tooltip management with `setupHoverTooltip`.
[[1]](diffhunk://#diff-e546d6337dcb4e908b738659b527f00387c07ab30674ab0dfbd61edab3d03ff4R93)
[[2]](diffhunk://#diff-e546d6337dcb4e908b738659b527f00387c07ab30674ab0dfbd61edab3d03ff4R329-R341)
*
[`src/types/view-devices/vDevice.ts`](diffhunk://#diff-2bb090dfab27a6fdd9154c9d52e4bb771254dcb3685cea653537c1266720bd4eL142-R163):
Refactored tooltip handling for devices to use centralized tooltip
utilities, replacing custom tooltip methods.
[[1]](diffhunk://#diff-2bb090dfab27a6fdd9154c9d52e4bb771254dcb3685cea653537c1266720bd4eL142-R163)
[[2]](diffhunk://#diff-2bb090dfab27a6fdd9154c9d52e4bb771254dcb3685cea653537c1266720bd4eL336-R305)

### Program Name Standardization:
* Multiple files (`src/programs/arp_protocol.ts`,
`src/programs/echo_sender.ts`, `src/programs/http_client.ts`): Replaced
hardcoded program names with constants from `TOOLTIP_KEYS` for
consistency.
[[1]](diffhunk://#diff-73d02eab30d55d41500cd0a71aa8e7f419adec94c1c39750afd378a59d9255e7R10-R14)
[[2]](diffhunk://#diff-9a573e48365a1c0d2b46d32b2e4c752bedd0c3569544861db5dc2ab0e0fd23aeR11-R14)
[[3]](diffhunk://#diff-0f650b51a4265ea385ca0d0aa8c26070fb0b00b67dad5d0dcaf085aaa16f4065R9-R13)

### Constants Update:
*
[`src/utils/constants/tooltips_constants.ts`](diffhunk://#diff-d23a6aa67e252dd864d40b8b3b4cc29db716b0e742da79d7ef8da9b9dc956ce1L21-R24):
Added new constants for program names and tooltip content, such as
`SEND_ARP_REQUEST` and `SERVE_HTTP_REQUESTS`.
[[1]](diffhunk://#diff-d23a6aa67e252dd864d40b8b3b4cc29db716b0e742da79d7ef8da9b9dc956ce1L21-R24)
[[2]](diffhunk://#diff-d23a6aa67e252dd864d40b8b3b4cc29db716b0e742da79d7ef8da9b9dc956ce1R193-R196)

These changes improve maintainability, enhance user interaction with
tooltips, and ensure consistency in how program names are defined and
used.

Author: pgallino

src/graphics/renderables/canvas_tooltip_manager.ts

@@ -0,0 +1,72 @@
+import { Text, TextStyle, Container } from "pixi.js";
+
+/**
+ * Displays a tooltip in a specific container.
+ * @param container - The container where the tooltip will be displayed.
+ * @param message - The message to display in the tooltip.
+ * @param x - The X position of the tooltip.
+ * @param y - The Y position of the tooltip.
+ * @param existingTooltip - An existing tooltip (if already created).
+ * @returns The updated or newly created tooltip.
+ */
+export function showTooltip(
+  container: Container,
+  message: string,
+  x: number,
+  y: number,
+  existingTooltip: Text | null,
+): Text {
+  if (!existingTooltip) {
+    const textStyle = new TextStyle({
+      fontSize: 12,
+      fill: 0x000000, // Black
+      align: "center",
+      fontWeight: "bold",
+    });
+
+    const tooltip = new Text({ text: message, style: textStyle });
+    tooltip.anchor.set(0.5);
+    container.addChild(tooltip);
+
+    tooltip.x = x;
+    tooltip.y = y;
+    tooltip.visible = true;
+
+    return tooltip;
+  }
+
+  // If the tooltip already exists, update its position and message
+  existingTooltip.text = message;
+  existingTooltip.x = x;
+  existingTooltip.y = y;
+  existingTooltip.visible = true;
+
+  return existingTooltip;
+}
+
+/**
+ * Hides an existing tooltip.
+ * @param tooltip - The tooltip to hide.
+ */
+export function hideTooltip(tooltip: Text | null): void {
+  if (tooltip) {
+    tooltip.visible = false;
+  }
+}
+
+/**
+ * Removes a tooltip from the container and frees memory.
+ * @param container - The container of the tooltip.
+ * @param tooltip - The tooltip to remove.
+ * @returns `null` to indicate that the tooltip has been removed.
+ */
+export function removeTooltip(
+  container: Container,
+  tooltip: Text | null,
+): null {
+  if (tooltip) {
+    container.removeChild(tooltip);
+    tooltip.destroy();
+  }
+  return null;
+}

src/programs/arp_protocol.ts

@@ -7,10 +7,11 @@ import { EthernetFrame, FramePayload, MacAddress } from "../packets/ethernet";
 import { sendViewPacket } from "../types/packet";
 import { IpAddress } from "../packets/ip";
 import { ArpRequest } from "../packets/arp";
+import { TOOLTIP_KEYS } from "../utils/constants/tooltips_constants";
 
 // ARP Request/Response
 export class ArpProtocol extends ProgramBase {
-  static readonly PROGRAM_NAME = "Send ARP request";
+  static readonly PROGRAM_NAME = TOOLTIP_KEYS.SEND_ARP_REQUEST;
 
   protected dstIp: IpAddress;
 

src/programs/echo_sender.ts

@@ -8,9 +8,10 @@ import { EchoRequest } from "../packets/icmp";
 import { IPv4Packet } from "../packets/ip";
 import { ViewNetworkDevice } from "../types/view-devices/vNetworkDevice";
 import { EthernetFrame } from "../packets/ethernet";
+import { TOOLTIP_KEYS } from "../utils/constants/tooltips_constants";
 
 export class SingleEcho extends ProgramBase {
-  static readonly PROGRAM_NAME = "Send ICMP echo";
+  static readonly PROGRAM_NAME = TOOLTIP_KEYS.SEND_ICMP_ECHO;
 
   protected dstId: DeviceId;
 
@@ -85,7 +86,7 @@ export class SingleEcho extends ProgramBase {
 }
 
 export class EchoServer extends ProgramBase {
-  static readonly PROGRAM_NAME = "Echo server";
+  static readonly PROGRAM_NAME = TOOLTIP_KEYS.ECHO_SERVER;
 
   private echoProgram: SingleEcho;
   private progress = 0;

src/programs/http_client.ts

@@ -6,10 +6,11 @@ import { Layer } from "../types/layer";
 import { AsyncQueue } from "../types/network-modules/asyncQueue";
 import { TcpSocket } from "../types/network-modules/tcpModule";
 import { ViewHost } from "../types/view-devices";
+import { TOOLTIP_KEYS } from "../utils/constants/tooltips_constants";
 import { ProgramBase } from "./program_base";
 
 export class HttpClient extends ProgramBase {
-  static readonly PROGRAM_NAME = "Send HTTP request";
+  static readonly PROGRAM_NAME = TOOLTIP_KEYS.SEND_HTTP_REQUEST;
 
   private dstId: DeviceId;
 
@@ -88,7 +89,7 @@ export class HttpClient extends ProgramBase {
 }
 
 export class HttpServer extends ProgramBase {
-  static readonly PROGRAM_NAME = "Serve HTTP requests";
+  static readonly PROGRAM_NAME = TOOLTIP_KEYS.SERVE_HTTP_REQUESTS;
 
   private port: number;
 

src/types/edge.ts

@@ -1,4 +1,4 @@
-import { Graphics, Point } from "pixi.js";
+import { Graphics, Point, Text } from "pixi.js";
 import { ViewGraph } from "./graphs/viewgraph";
 import { ViewDevice } from "./view-devices/index"; // Import the Device class
 import { deselectElement, selectElement } from "./viewportManager";
@@ -8,11 +8,18 @@ import { Packet } from "./packet";
 import { EdgeInfo } from "../graphics/renderables/edge_info";
 import { DataEdge, DeviceId } from "./graphs/datagraph";
 import { MacAddress } from "../packets/ethernet";
+import {
+  hideTooltip,
+  removeTooltip,
+  showTooltip,
+} from "../graphics/renderables/canvas_tooltip_manager";
 
 export class Edge extends Graphics {
   private _data: DataEdge;
   private startPos: Point;
   private endPos: Point;
+  private startTooltip: Text | null = null; // Tooltip para el extremo inicial
+  private endTooltip: Text | null = null; // Tooltip para el extremo final
 
   viewgraph: ViewGraph;
 
@@ -31,16 +38,14 @@ export class Edge extends Graphics {
     this.eventMode = "static";
     this.interactive = true;
     this.cursor = "pointer";
+    this.setupHoverTooltip();
     this.on("click", () => selectElement(this));
     // NOTE: this is "click" for mobile devices
     this.on("tap", () => selectElement(this));
 
     this.refresh();
   }
 
-  /**
-   * Recomputes the edge's position based on the connected devices.
-   */
   refresh() {
     const n1 = this.data.from.id;
     const n2 = this.data.to.id;
@@ -123,6 +128,7 @@ export class Edge extends Graphics {
 
   destroy(): void {
     deselectElement();
+    this.removeTooltips();
     super.destroy();
   }
 
@@ -235,4 +241,86 @@ export class Edge extends Graphics {
       .getFreeInterfaces(deviceId);
     return freeIfaces;
   }
+
+  private setupHoverTooltip() {
+    this.on("mouseover", () => {
+      this.showTooltips();
+      this.fixTooltipPositions(); // fixes the tooltip positions
+    });
+
+    this.on("mouseout", () => {
+      this.hideTooltips();
+    });
+  }
+
+  private showTooltips() {
+    const startIface = this.data.from.iface;
+    const endIface = this.data.to.iface;
+
+    const offsetX = 20;
+    const offsetY = -10;
+
+    this.startTooltip = showTooltip(
+      this,
+      `eth${startIface}`,
+      this.startPos.x + offsetX,
+      this.startPos.y + offsetY,
+      this.startTooltip,
+    );
+
+    this.endTooltip = showTooltip(
+      this,
+      `eth${endIface}`,
+      this.endPos.x - offsetX,
+      this.endPos.y + offsetY,
+      this.endTooltip,
+    );
+  }
+
+  private fixTooltipPositions() {
+    const offsetX = 20; // Offset on the X-axis to move it away from the device
+    const offsetY = -10; // Offset on the Y-axis to bring it closer to the Edge
+
+    // Determine if the start point is to the left or right of the end point
+    const isStartLeft = this.startPos.x < this.endPos.x;
+
+    // Check the visibility of the starting device
+    const device1 = this.viewgraph.getDevice(this.data.from.id);
+    if (this.startTooltip) {
+      if (device1 && device1.visible) {
+        // If the starting device is visible, update the tooltip position
+        this.startTooltip.x =
+          this.startPos.x + (isStartLeft ? offsetX : -offsetX);
+        this.startTooltip.y = this.startPos.y + offsetY;
+        this.startTooltip.visible = true;
+      } else {
+        // If not visible, hide the tooltip
+        this.startTooltip.visible = false;
+      }
+    }
+
+    // Check the visibility of the ending device
+    const device2 = this.viewgraph.getDevice(this.data.to.id);
+    if (this.endTooltip) {
+      if (device2 && device2.visible) {
+        // If the ending device is visible, update the tooltip position
+        this.endTooltip.x = this.endPos.x + (isStartLeft ? -offsetX : offsetX);
+        this.endTooltip.y = this.endPos.y + offsetY;
+        this.endTooltip.visible = true;
+      } else {
+        // If not visible, hide the tooltip
+        this.endTooltip.visible = false;
+      }
+    }
+  }
+
+  private hideTooltips() {
+    hideTooltip(this.startTooltip);
+    hideTooltip(this.endTooltip);
+  }
+
+  private removeTooltips() {
+    this.startTooltip = removeTooltip(this, this.startTooltip);
+    this.endTooltip = removeTooltip(this, this.endTooltip);
+  }
 }

src/types/packet.ts

@@ -3,6 +3,7 @@ import {
   Graphics,
   GraphicsContext,
   Ticker,
+  Text,
 } from "pixi.js";
 import { deselectElement, isSelected, selectElement } from "./viewportManager";
 import { circleGraphicsContext, Colors, ZIndexLevels } from "../utils/utils";
@@ -29,6 +30,11 @@ import {
   IcmpPacket,
 } from "../packets/icmp";
 import { PacketInfo } from "../graphics/renderables/packet_info";
+import {
+  hideTooltip,
+  removeTooltip,
+  showTooltip,
+} from "../graphics/renderables/canvas_tooltip_manager";
 
 const contextPerPacketType: Record<string, GraphicsContext> = {
   HTTP: circleGraphicsContext(Colors.Hazel, 5), // for HTTP
@@ -84,6 +90,7 @@ export class Packet extends Graphics {
   rawPacket: EthernetFrame;
   ctx: GlobalContext;
   belongingLayer: Layer;
+  tooltip: Text | null = null;
 
   constructor(
     ctx: GlobalContext,
@@ -105,6 +112,7 @@ export class Packet extends Graphics {
     this.ctx = ctx;
     this.interactive = true;
     this.cursor = "pointer";
+    this.setupHoverTooltip();
     this.on("click", this.onClick, this);
     this.on("tap", this.onClick, this);
     // register in Packet Manager
@@ -322,8 +330,19 @@ export class Packet extends Graphics {
 
     // Deregister packet from PacketManager
     this.ctx.getViewGraph().getPacketManager().deregisterPacket(this.packetId);
+    removeTooltip(this, this.tooltip);
     this.destroy();
   }
+
+  private setupHoverTooltip() {
+    this.on("mouseover", () => {
+      this.tooltip = showTooltip(this, this.type, 0, -15, this.tooltip);
+    });
+
+    this.on("mouseout", () => {
+      hideTooltip(this.tooltip);
+    });
+  }
 }
 
 // TODO: Replace and nextHopId with the sending interface. Like this, the function