Feat/device tooltips (#231)

implement tooltip functionality for ViewDevice and its subclasses with
layer-based filtering

- Centralized tooltip logic in ViewDevice, including setup, show, and
hide methods.
- Added layer-based filtering for tooltip content:
- ViewHost: Displays IP for Layer.Network or below, and both IP and MAC
for upper layers.
- ViewSwitch: Displays MAC for Layer.Network or below, and MAC with
switching table for upper layers.
- Tooltip is dynamically positioned below the ID label.
- Subclasses only need to implement getTooltipDetails for custom tooltip
content.


![image](https://github.com/user-attachments/assets/1da5220d-d944-482b-bffb-fcac2e961afd)

---------

Co-authored-by: Tomás Grüner <[email protected]>

Author: pgallino

src/packets/ethernet.ts

@@ -48,6 +48,12 @@ export class MacAddress {
       .join(":");
   }
 
+  toCompressedString(): string {
+    return Array.from(this.octets)
+      .map((byte) => (byte === 0 ? "" : byte.toString(16).padStart(2, "0")))
+      .join(":");
+  }
+
   // Check if two MAC addresses are equal.
   equals(other: MacAddress): boolean {
     return this.octets.every((octet, index) => octet === other.octets[index]);

src/types/view-devices/vDevice.ts

@@ -54,6 +54,7 @@ export function layerFromType(type: DeviceType) {
 
 export abstract class ViewDevice extends Container {
   private sprite: Sprite;
+  private tooltip: Text | null = null; // Tooltip como un Text de PIXI.js
 
   readonly id: DeviceId;
   readonly viewgraph: ViewGraph;
@@ -123,6 +124,9 @@ export abstract class ViewDevice extends Container {
     // Add device ID label using the helper function
     this.addDeviceIdLabel();
 
+    // Set up tooltip behavior
+    this.setupHoverTooltip();
+
     this.on("pointerdown", this.onPointerDown, this);
     this.on("click", this.onClick, this);
     // NOTE: this is "click" for mobile devices
@@ -135,6 +139,68 @@ export abstract class ViewDevice extends Container {
     // Do nothing
   }
 
+  // Tooltip setup
+  private setupHoverTooltip() {
+    this.on("mouseover", () => {
+      const currentLayer = this.ctx.getCurrentLayer(); // Get the current layer from the context
+      const tooltipMessage = this.getTooltipDetails(currentLayer); // Generate the tooltip message
+      this.showTooltip(tooltipMessage); // Show the tooltip
+    });
+
+    this.on("mouseout", () => {
+      this.hideTooltip(); // Hide the tooltip
+    });
+  }
+
+  /**
+   * Abstract method to get tooltip details based on the layer.
+   * Must be implemented by derived classes.
+   */
+  abstract getTooltipDetails(layer: Layer): string;
+
+  /**
+   * Displays a tooltip with the provided message.
+   */
+  protected showTooltip(message: string) {
+    if (!this.tooltip) {
+      const textStyle = new TextStyle({
+        fontSize: 12,
+        fill: Colors.Black,
+        align: "center",
+        fontWeight: "bold",
+      });
+
+      this.tooltip = new Text({ text: message, style: textStyle });
+      this.tooltip.anchor.set(0.5); // Center the text
+      const idTextY = this.height * 0.8; // Position of the ID label
+      this.tooltip.y = idTextY + 20; // Tooltip is 20px below the ID label
+      this.addChild(this.tooltip); // Add the tooltip as a child
+    }
+
+    this.tooltip.text = message; // Update the tooltip message
+    this.tooltip.visible = true; // Show the tooltip
+  }
+
+  /**
+   * Hides the tooltip.
+   */
+  protected hideTooltip() {
+    if (this.tooltip) {
+      this.tooltip.visible = false; // Hide the tooltip
+    }
+  }
+
+  /**
+   * Removes the tooltip from the device.
+   */
+  protected removeTooltip() {
+    if (this.tooltip) {
+      this.removeChild(this.tooltip); // Remove the tooltip from the sprite
+      this.tooltip.destroy(); // Free memory
+      this.tooltip = null;
+    }
+  }
+
   updateVisibility() {
     this.visible = layerIncluded(this.getLayer(), this.viewgraph.getLayer());
   }
@@ -267,6 +333,7 @@ export abstract class ViewDevice extends Container {
 
   destroy() {
     deselectElement();
+    this.removeTooltip(); // Remove the tooltip if it exists
     super.destroy();
   }
 }

src/types/view-devices/vHost.ts

@@ -180,6 +180,16 @@ export class ViewHost extends ViewNetworkDevice {
     this.runningPrograms.clear();
   }
 
+  getTooltipDetails(layer: Layer): string {
+    if (layer >= Layer.Network) {
+      // If we are in the network layer or below, show only the IP
+      return `IP: ${this.ip.octets.join(".")}`;
+    } else {
+      // If we are in the upper layer, show both IP and MAC
+      return `IP: ${this.ip.octets.join(".")}\nMAC: ${this.mac.toCompressedString()}`;
+    }
+  }
+
   // TCP
 
   private tcpModule = new TcpModule(this);

src/types/view-devices/vRouter.ts

@@ -120,6 +120,16 @@ export class ViewRouter extends ViewNetworkDevice {
     return DeviceType.Router;
   }
 
+  getTooltipDetails(layer: Layer): string {
+    if (layer >= Layer.Network) {
+      // If we are in the network layer or below, show only the IP
+      return `IP: ${this.ip.octets.join(".")}`;
+    } else {
+      // If we are in the upper layer, show both IP and MAC
+      return `IP: ${this.ip.octets.join(".")}\nMAC: ${this.mac.toCompressedString()}`;
+    }
+  }
+
   setMaxQueueSize(newSize: number) {
     this.packetQueue.setMaxQueueSize(newSize);
     this.packetQueueSize = newSize;

src/types/view-devices/vSwitch.ts

@@ -56,6 +56,11 @@ export class ViewSwitch extends ViewDevice {
     return DeviceType.Switch;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getTooltipDetails(_layer: Layer): string {
+    return `MAC: ${this.mac.toCompressedString()}`;
+  }
+
   updateSwitchingTable(mac: MacAddress, deviceId: DeviceId): void {
     console.debug(`Adding ${mac.toString()} to the switching table`);
     this.viewgraph.getDataGraph().modifyDevice(this.id, (device) => {