Highlight all merged edges and unify information (#242)

close #201

Author: pgallino

src/graphics/renderables/base_info.ts

@@ -11,9 +11,7 @@ export abstract class BaseInfo implements Renderable {
 
   constructor(title: string) {
     this.information = new TextInfo(title);
-    this.addDivider();
     this.addCommonButtons();
-    this.addDivider();
   }
 
   protected abstract addCommonInfoFields(): void;

src/graphics/renderables/device_info.ts

@@ -50,6 +50,7 @@ export class DeviceInfo extends BaseInfo {
   }
 
   protected addCommonButtons(): void {
+    this.addDivider();
     const connectButton = new Button({
       text: TOOLTIP_KEYS.CONNECT_DEVICE,
       onClick: () => this.device.selectToConnect(),
@@ -75,6 +76,7 @@ export class DeviceInfo extends BaseInfo {
     });
 
     this.inputFields.push(connectButton.toHTML(), deleteButton.toHTML());
+    this.addDivider();
   }
 
   addProgramRunner(runner: ProgramRunner, programs: ProgramInfo[]): void {

src/graphics/renderables/edge_info.ts

@@ -65,6 +65,7 @@ export class EdgeInfo extends BaseInfo {
 
   protected addCommonButtons(): void {
     // Button to delete the edge
+    this.addDivider();
     const deleteEdgeButton = new Button({
       text: TOOLTIP_KEYS.DELETE_EDGE_BUTTON,
       onClick: () => {
@@ -84,6 +85,7 @@ export class EdgeInfo extends BaseInfo {
 
     // Add the button to the inputFields array
     this.inputFields.push(deleteEdgeButton.toHTML());
+    this.addDivider();
   }
 
   protected addInterfaceDropdowns(): void {

src/graphics/renderables/multi_edge_info.ts

@@ -0,0 +1,41 @@
+import { Edge } from "../../types/edge";
+import { BaseInfo } from "./base_info";
+import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
+
+export class MultiEdgeInfo extends BaseInfo {
+  protected addCommonInfoFields(): void {
+    return;
+  }
+  protected addCommonButtons(): void {
+    return;
+  }
+  readonly edges: Edge[];
+
+  constructor(edges: Edge[]) {
+    super(TOOLTIP_KEYS.EDGE_INFORMATION);
+    this.edges = edges;
+    this.addCombinedInfoFields();
+  }
+
+  protected addCombinedInfoFields(): void {
+    const visibleDevices = new Set<number>();
+
+    this.edges.forEach((edge) => {
+      const fromDevice = edge.viewgraph.getDevice(edge.data.from.id);
+      const toDevice = edge.viewgraph.getDevice(edge.data.to.id);
+
+      if (fromDevice && fromDevice.visible) {
+        visibleDevices.add(fromDevice.id);
+      }
+      if (toDevice && toDevice.visible) {
+        visibleDevices.add(toDevice.id);
+      }
+    });
+
+    this.information.addListField(
+      "Connected Devices",
+      Array.from(visibleDevices),
+      TOOLTIP_KEYS.MULTI_EDGE_CONNECTED_DEVICES,
+    );
+  }
+}

src/graphics/renderables/packet_info.ts

@@ -86,7 +86,7 @@ export class PacketInfo extends BaseInfo {
   }
 
   protected addCommonButtons(): void {
-    // Botón para descartar el paquete
+    this.addDivider();
     const discardPacketButton = new Button({
       text: TOOLTIP_KEYS.DISCARD_PACKET_BUTTON,
       onClick: () => {
@@ -100,18 +100,16 @@ export class PacketInfo extends BaseInfo {
       tooltip: TOOLTIP_KEYS.DISCARD_PACKET_BUTTON,
     });
 
-    // Agregar el botón al array de inputFields
     this.inputFields.push(discardPacketButton.toHTML());
+    this.addDivider();
   }
 
   private addToggleInfo(): void {
-    // Obtener los detalles del paquete
     const packetDetails = this.packet.getPacketDetails(
       this.packet.viewgraph.getLayer(),
       this.packet.rawPacket,
     );
 
-    // Crear un ToggleInfo para los detalles del paquete
     const toggleInfo = new ToggleInfo({
       title: "Packet Details",
       fields: Object.entries(packetDetails).map(([key, value]) => ({
@@ -124,7 +122,6 @@ export class PacketInfo extends BaseInfo {
       },
     });
 
-    // Agregar el ToggleInfo al array de inputFields
     this.inputFields.push(toggleInfo.toHTML());
   }
 }

src/types/edge.ts

@@ -8,6 +8,7 @@ import { Packet } from "./packet";
 import { EdgeInfo } from "../graphics/renderables/edge_info";
 import { DataEdge, DeviceId } from "./graphs/datagraph";
 import { MacAddress } from "../packets/ethernet";
+import { MultiEdgeInfo } from "../graphics/renderables/multi_edge_info";
 import {
   hideTooltip,
   removeTooltip,
@@ -18,8 +19,9 @@ 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
+  private highlightedEdges: Edge[] = [];
+  private startTooltip: Text | null = null; // Tooltip for the start of the edge
+  private endTooltip: Text | null = null; // Tooltip for the end of the edge
 
   viewgraph: ViewGraph;
 
@@ -104,12 +106,15 @@ export class Edge extends Graphics {
   }
 
   select() {
-    this.highlight();
+    this.highlightedEdges = this.viewgraph.findConnectedEdges(this);
+    this.highlightedEdges.forEach((edge) => edge.highlight());
     this.showInfo();
   }
 
   deselect() {
-    this.removeHighlight();
+    // remove highlight from all edges
+    this.highlightedEdges.forEach((edge) => edge.removeHighlight());
+    this.highlightedEdges = [];
   }
 
   highlight() {
@@ -120,10 +125,14 @@ export class Edge extends Graphics {
     this.drawEdge(this.startPos, this.endPos, Colors.Lightblue);
   }
 
-  // Method to show the Edge information
   showInfo() {
-    const edgeInfo = new EdgeInfo(this);
-    RightBar.getInstance().renderInfo(edgeInfo);
+    if (this.highlightedEdges && this.highlightedEdges.length > 1) {
+      const multiEdgeInfo = new MultiEdgeInfo(this.highlightedEdges);
+      RightBar.getInstance().renderInfo(multiEdgeInfo);
+    } else {
+      const edgeInfo = new EdgeInfo(this);
+      RightBar.getInstance().renderInfo(edgeInfo);
+    }
   }
 
   destroy(): void {
@@ -244,12 +253,15 @@ export class Edge extends Graphics {
 
   private setupHoverTooltip() {
     this.on("mouseover", () => {
-      this.showTooltips();
-      this.fixTooltipPositions(); // fixes the tooltip positions
+      const group = this.viewgraph.findConnectedEdges(this);
+      group.forEach((edge) => {
+        edge.showTooltips();
+        edge.fixTooltipPositions();
+      });
     });
-
     this.on("mouseout", () => {
-      this.hideTooltips();
+      const group = this.viewgraph.findConnectedEdges(this);
+      group.forEach((edge) => edge.hideTooltips());
     });
   }
 

src/types/graphs/viewgraph.ts

@@ -486,6 +486,34 @@ export class ViewGraph {
     }
     this.graph.clear();
   }
+
+  /**
+   * Finds all edges connected to the given edge, ignoring nodes that are not visible.
+   */
+  findConnectedEdges(edge: Edge): Edge[] {
+    const visitedEdges = new Set<Edge>();
+    const queue: Edge[] = [edge];
+
+    while (queue.length > 0) {
+      const currentEdge = queue.shift();
+      if (!currentEdge || visitedEdges.has(currentEdge)) continue;
+      visitedEdges.add(currentEdge);
+
+      for (const nodeId of currentEdge.getDeviceIds()) {
+        const device = this.getDevice(nodeId);
+        if (device && device.visible) {
+          continue;
+        }
+        const edges = this.getConnections(nodeId);
+        for (const e of edges) {
+          if (!visitedEdges.has(e)) {
+            queue.push(e);
+          }
+        }
+      }
+    }
+    return Array.from(visitedEdges);
+  }
 }
 
 function layerDFS(

src/utils/constants/tooltips_constants.ts

@@ -68,6 +68,7 @@ export const TOOLTIP_KEYS = {
   IP_REQUEST: "IP to Request",
   ARP_TABLE: "ARP Table",
   IFACE_EDITOR: "iface-editor",
+  MULTI_EDGE_CONNECTED_DEVICES: "Multi Edge Connected Devices",
 } as const;
 
 // Tooltip Content
@@ -190,6 +191,8 @@ export const TOOLTIP_CONTENT = {
     "The ARP (Address Resolution Protocol) table maps IP addresses to MAC addresses. It is used to resolve the hardware address of a device in the same local network.",
   [TOOLTIP_KEYS.IFACE_EDITOR]:
     "Modify the network interface used by this device.",
+  [TOOLTIP_KEYS.MULTI_EDGE_CONNECTED_DEVICES]:
+    "This field shows the devices connected to the selected edge. It provides a list of all devices that are directly connected.",
   [TOOLTIP_KEYS.SEND_ARP_REQUEST]:
     "Send an ARP request to a specified IP address. This command is used to resolve the MAC address of a device in the same local network.",
   [TOOLTIP_KEYS.SERVE_HTTP_REQUESTS]: