feat: add updateVisibility method to Edge class (#209)

closes #199 
closes #200
closes #208

---------

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

Author: pgallino

src/graphics/renderables/device_info.ts

@@ -26,9 +26,7 @@ export class DeviceInfo extends BaseInfo {
 
   protected addCommonInfoFields(): void {
     const { id, mac } = this.device;
-    const connections = this.device.viewgraph
-      .getConnections(id)
-      .map((edge) => edge.otherEnd(id));
+    const connections = this.device.viewgraph.getVisibleConnectedDeviceIds(id);
 
     this.information.addField(TOOLTIP_KEYS.ID, id.toString(), TOOLTIP_KEYS.ID);
     this.information.addListField(

src/types/data-devices/dSwitch.ts

@@ -31,7 +31,6 @@ export class DataSwitch extends DataDevice {
     };
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private forwardFrame(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     frame: EthernetFrame,

src/types/edge.ts

@@ -121,6 +121,44 @@ export class Edge extends Graphics {
     return this.data;
   }
 
+  makeVisible() {
+    this.visible = true;
+  }
+
+  updateVisibility(): void {
+    const device1 = this.viewgraph.getDevice(this.data.from.id);
+    const device2 = this.viewgraph.getDevice(this.data.to.id);
+
+    if (!device1 || !device2) {
+      console.warn(
+        `One or both devices for edge ${this.data.from.id} ↔ ${this.data.to.id} are missing.`,
+      );
+      this.visible = false;
+      return;
+    }
+
+    // Get visible devices reachable from each device
+    const device1CanReachVisibleDevice = this.viewgraph.canReachVisibleDevice(
+      device1.id,
+      device2.id,
+    );
+    const device2CanReachVisibleDevice = this.viewgraph.canReachVisibleDevice(
+      device2.id,
+      device1.id,
+    );
+
+    // Update the visibility of the edge
+    this.visible = device1CanReachVisibleDevice && device2CanReachVisibleDevice;
+  }
+
+  /**
+   * Updates the position of an edge connecting two devices, taking into account their visibility
+   * and dimensions. If a device is visible, the edge will leave a space around the device's center
+   * to account for its size. Otherwise, the edge will connect directly to the device's position.
+   *
+   * @param device1 - The first device (starting point of the edge).
+   * @param device2 - The second device (ending point of the edge).
+   */
   private updatePosition(device1: ViewDevice, device2: ViewDevice) {
     const dx = device2.x - device1.x;
     const dy = device2.y - device1.y;

src/types/graphs/graph.ts

@@ -1,5 +1,10 @@
 export type VertexId = number;
 
+interface DfsOptions<Vertex, Edge> {
+  vertexFilter?: (vertex: Vertex, vertexId: VertexId) => boolean;
+  edgeFilter?: (edge: Edge, id1: VertexId, id2: VertexId) => boolean;
+}
+
 export interface RemovedVertexData<Vertex, Edge> {
   id: VertexId;
   vertex: Vertex;
@@ -106,6 +111,50 @@ export class Graph<Vertex, Edge> {
     this.vertices.clear();
     this.edges.clear();
   }
+
+  /**
+   * Travels the graph in a Depth-First Search manner.
+   * @param startId ID of the vertex to start from
+   * @param opts Options for filtering vertices or edges during traversal.
+   * If the function returns true, the vertex's neighbors are visited or the edge is traversed.
+   */
+  dfs(startId: VertexId, opts: DfsOptions<Vertex, Edge>): void {
+    opts.edgeFilter = opts.edgeFilter || (() => true);
+    opts.vertexFilter = opts.vertexFilter || (() => true);
+    this.recursiveDfs(startId, opts, new Set<VertexId>());
+  }
+
+  private recursiveDfs(
+    currentId: VertexId,
+    opts: DfsOptions<Vertex, Edge>,
+    visited: Set<VertexId>,
+  ) {
+    if (visited.has(currentId)) {
+      return; // Avoid cycles
+    }
+    visited.add(currentId);
+
+    const currentDevice = this.getVertex(currentId);
+    if (!currentDevice) {
+      console.warn(`Device not found: ${currentId}`);
+      return; // If the device doesn't exist, stop
+    }
+    if (!opts.vertexFilter(currentDevice, currentId)) {
+      return; // If the filter returns false, stop
+    }
+
+    // Explore neighbors recursively
+    for (const [neighborId, edge] of this.getEdges(currentId)) {
+      // If the neighbor hasn't been visited, we check the edge filter
+      // and visit the neighbor if the filter returns true
+      if (
+        !visited.has(neighborId) &&
+        opts.edgeFilter(edge, currentId, neighborId)
+      ) {
+        this.recursiveDfs(neighborId, opts, visited);
+      }
+    }
+  }
 }
 
 function* edgeIterator<Edge>(

src/types/graphs/viewgraph.ts

@@ -104,6 +104,7 @@ export class ViewGraph {
       );
       return null;
     }
+
     if (this.graph.hasEdge(device1.id, device2.id)) {
       console.warn(`Edge with ID ${device1.id},${device2.id} already exists.`);
       return this.graph.getEdge(device1.id, device2.id);
@@ -197,8 +198,25 @@ export class ViewGraph {
       device.updateVisibility();
     }
 
+    // Refresh and make all edges visible again
     for (const [, , edge] of this.graph.getAllEdges()) {
       edge.refresh();
+      edge.makeVisible();
+    }
+
+    // Iterate until no changes are made
+    for (let i = 0; i < this.graph.getVertexCount(); i++) {
+      let hadChanges = false;
+      // For each iteration, update visibility of all edges.
+      // This takes into account currently visible edges and devices.
+      for (const [, , edge] of this.graph.getAllEdges()) {
+        const previousVisibility = edge.visible;
+        edge.updateVisibility();
+        hadChanges ||= previousVisibility !== edge.visible;
+      }
+      if (!hadChanges) {
+        break;
+      }
     }
 
     // warn Packet Manager that the layer has been changed
@@ -223,6 +241,52 @@ export class ViewGraph {
     return Array.from(edges).map(([, edge]) => edge);
   }
 
+  getVisibleConnectedDeviceIds(deviceId: DeviceId): DeviceId[] {
+    const visibleDevices: DeviceId[] = []; // Stores visible connected device IDs
+
+    const vertexFilter = (device: ViewDevice, id: DeviceId): boolean => {
+      // If device is visible, add it to the set and stop traversal
+      if (device.visible && id !== deviceId) {
+        visibleDevices.push(id);
+        return false;
+      }
+      return true;
+    };
+
+    this.graph.dfs(deviceId, { vertexFilter });
+
+    return visibleDevices; // Return the list of visible connected device IDs
+  }
+
+  /**
+   * Checks if a device can reach any visible device, excluding the specified device from traversal.
+   * @param startId ID of the device to check for
+   * @param excludeId ID of a device to be excluded from traversal
+   * @returns True if the device can reach any visible device, otherwise false.
+   */
+  canReachVisibleDevice(startId: DeviceId, excludeId: DeviceId): boolean {
+    const visibleDevices = new Set<DeviceId>();
+
+    const vertexFilter = (device: ViewDevice, id: DeviceId): boolean => {
+      // If the device is excluded, skip it and stop traversal
+      if (id === excludeId) {
+        return false;
+      }
+      // If device is visible, add it to the set and stop traversal
+      if (device.visible) {
+        visibleDevices.add(id);
+        return false;
+      }
+      return true;
+    };
+
+    // Avoid invisible edges
+    const edgeFilter = (edge: Edge) => edge.visible;
+
+    this.graph.dfs(startId, { vertexFilter, edgeFilter });
+    return visibleDevices.size > 0;
+  }
+
   getAllConnections(): Edge[] {
     return Array.from(this.graph.getAllEdges()).map(([, , edge]) => edge);
   }