Switch layer (#67)

Done #19 
Different set of devices are shown for each layer, depending on which
devices belong to the abstraction layer. Also, abstracted connections
are made for upper layers to show connection between to devices.

Author: Manuel-Pol

src/context.ts

@@ -7,6 +7,7 @@ import {
 } from "./types/viewportManager";
 import { Layer } from "./types/devices/device";
 import { IpAddressGenerator } from "./packets/ip";
+import { layerFromName } from "./types/devices/utils";
 
 export class GlobalContext {
   private viewport: Viewport = null;
@@ -52,6 +53,11 @@ export class GlobalContext {
     return this.datagraph;
   }
 
+  changeViewGraph(selectedLayer: string) {
+    const layer = layerFromName(selectedLayer);
+    this.setNetwork(this.datagraph, layer);
+  }
+
   private setupAutoSave() {
     this.clearAutoSave();
 

src/index.ts

@@ -125,20 +125,20 @@ import PauseSvg from "./assets/pause-icon.svg";
   pauseButton.onclick = triggerPause;
 
   // (!) For layer abstraction functionality
-  // const layerSelect = document.getElementById(
-  //   "layer-select",
-  // ) as HTMLSelectElement;
+  const layerSelect = document.getElementById(
+    "layer-select",
+  ) as HTMLSelectElement;
 
-  // const selectNewLayer = (event: Event) => {
-  //   const selectedLayer = (event.target as HTMLSelectElement).value;
-  //   console.log(`Layer selected: ${selectedLayer}`);
+  const selectNewLayer = (event: Event) => {
+    const selectedLayer = (event.target as HTMLSelectElement).value;
+    console.log(`Layer selected: ${selectedLayer}`);
 
-  //   if (selectElement) {
-  //     ctx.changeViewGraph(selectedLayer);
-  //   }
-  // };
+    if (selectedLayer) {
+      ctx.changeViewGraph(selectedLayer);
+    }
+  };
 
-  // layerSelect.onchange = selectNewLayer;
+  layerSelect.onchange = selectNewLayer;
 
   document.body.onkeyup = function (e) {
     if (e.key === " " || e.code === "Space") {

src/types/devices/utils.ts

@@ -50,3 +50,18 @@ export function layerFromName(name: string): Layer {
       return Layer.Link;
   }
 }
+
+export function layerIncluded(layer1: Layer, layer2: Layer) {
+  // Determines whether layer1 is included within layer2’s abstraction.
+  console.log(`${layer1.valueOf()} <= ${layer2.valueOf()}`);
+  return layer1.valueOf() <= layer2.valueOf();
+}
+
+export function layerFromType(type: DeviceType) {
+  switch (type) {
+    case DeviceType.Router:
+      return Layer.Network;
+    case DeviceType.Host:
+      return Layer.App;
+  }
+}

src/types/graphs/datagraph.ts

@@ -80,7 +80,7 @@ export class DataGraph {
     const graphData: GraphData = [];
 
     // Serialize nodes
-    this.getDevices().forEach(([id, info]) => {
+    this.getDevices().forEach((info, id) => {
       const graphNode: GraphDataNode = {
         id,
         x: info.x,
@@ -206,8 +206,8 @@ export class DataGraph {
   }
 
   // Get all devices in the graph
-  getDevices(): [DeviceId, GraphNode][] {
-    return Array.from(this.devices.entries());
+  getDevices(): Map<DeviceId, GraphNode> {
+    return this.devices;
   }
 
   // Get the number of devices in the graph

src/types/graphs/viewgraph.ts

@@ -1,12 +1,23 @@
 import { Device } from "./../devices/index"; // Import the Device class
 import { Edge } from "./../edge";
-import { DataGraph, DeviceId, isRouter } from "./datagraph";
+import { DataGraph, DeviceId, GraphNode, isRouter } from "./datagraph";
 import { Viewport } from "../../graphics/viewport";
 import { Layer } from "../devices/device";
-import { createDevice } from "../devices/utils";
+import { createDevice, layerFromType, layerIncluded } from "../devices/utils";
 
 export type EdgeId = number;
 
+function generateConnectionKey(id1: number, id2: number): string {
+  return [id1, id2].sort().join(",");
+}
+
+function parseConnectionKey(key: string): { id1: number; id2: number } {
+  const connection: number[] = key
+    .split(",")
+    .map((value) => parseInt(value.trim()));
+  return { id1: connection[0], id2: connection[1] };
+}
+
 export class ViewGraph {
   private devices: Map<DeviceId, Device> = new Map<DeviceId, Device>();
   private edges: Map<EdgeId, Edge> = new Map<EdgeId, Edge>();
@@ -25,27 +36,35 @@ export class ViewGraph {
   private constructView() {
     // TODO: Adjust construction based on the selected layer in the future
     console.log("Constructing ViewGraph from DataGraph");
-    const connections = new Set<{ deviceId: DeviceId; adyacentId: DeviceId }>();
+    const connections = new Set<string>();
 
-    this.datagraph.getDevices().forEach(([deviceId, graphNode]) => {
-      const deviceInfo = { ...graphNode, id: deviceId };
-      const device: Device = createDevice(deviceInfo, this);
+    this.datagraph.getDevices().forEach((graphNode, deviceId) => {
+      if (layerIncluded(layerFromType(graphNode.type), this.layer)) {
+        const deviceInfo = { ...graphNode, id: deviceId };
+        const device: Device = createDevice(deviceInfo, this);
 
-      this.viewport.addChild(device);
+        this.viewport.addChild(device);
 
-      this.addDevice(device);
-      graphNode.connections.forEach((adyacentId) => {
-        if (!connections.has({ deviceId: adyacentId, adyacentId: deviceId })) {
-          connections.add({ deviceId, adyacentId });
-        }
-      });
+        this.addDevice(device);
+
+        this.layer_dfs(
+          this.datagraph.getDevices(),
+          deviceId,
+          deviceId,
+          new Set([deviceId]),
+          connections,
+        );
+      }
     });
 
     console.log("Finished creating devices in ViewGraph");
-    connections.forEach(({ deviceId, adyacentId }) => {
-      const device1 = this.getDevice(deviceId);
-      const device2 = this.getDevice(adyacentId);
-      device1.connectTo(device2.id);
+    connections.forEach((key) => {
+      const connection = parseConnectionKey(key);
+      const device1 = this.getDevice(connection.id1);
+      const device2 = this.getDevice(connection.id2);
+      const edge = this.drawEdge(device1, device2);
+      device1.addConnection(edge.id, device2.id);
+      device2.addConnection(edge.id, device1.id);
     });
     console.log("Finished constructing ViewGraph");
   }
@@ -60,6 +79,19 @@ export class ViewGraph {
     }
   }
 
+  drawEdge(device1: Device, device2: Device): Edge {
+    const edge = new Edge(
+      this.idCounter++,
+      { n1: device1.id, n2: device2.id },
+      device1,
+      device2,
+      this,
+    );
+    this.edges.set(edge.id, edge);
+    this.viewport.addChild(edge);
+    return edge;
+  }
+
   // Add a connection between two devices
   addEdge(device1Id: DeviceId, device2Id: DeviceId): EdgeId | null {
     if (device1Id === device2Id) {
@@ -92,17 +124,9 @@ export class ViewGraph {
       const device2 = this.devices.get(device2Id);
 
       if (device1 && device2) {
-        const edge = new Edge(
-          this.idCounter++,
-          { n1: device1Id, n2: device2Id },
-          device1,
-          device2,
-          this,
-        );
-        this.edges.set(edge.id, edge);
+        const edge = this.drawEdge(device1, device2);
 
         this.datagraph.addEdge(device1Id, device2Id);
-        this.viewport.addChild(edge);
 
         console.log(
           `Connection created between devices ID: ${device1Id} and ID: ${device2Id}`,
@@ -275,4 +299,33 @@ export class ViewGraph {
     }
     return path.reverse();
   }
+
+  private layer_dfs(
+    graph: Map<DeviceId, GraphNode>,
+    s: number, // source node
+    v: number,
+    visited: Set<number>,
+    connections: Set<string>,
+  ) {
+    graph.get(v).connections.forEach((w) => {
+      console.log(`Se accede a ${w} desde ${v}`);
+      if (!visited.has(w)) {
+        console.log(`Se visita ${w}`);
+        const adyacent = this.datagraph.getDevice(w);
+        // mark node as visited
+        visited.add(w);
+        if (layerIncluded(layerFromType(adyacent.type), this.layer)) {
+          // add connection between v and w
+          const connectionKey: string = generateConnectionKey(w, s);
+          if (!connections.has(connectionKey)) {
+            console.log(`Dispositivos agregados a conexion`);
+            connections.add(connectionKey);
+          }
+        } else {
+          // continue with recursive search
+          this.layer_dfs(graph, s, w, visited, connections);
+        }
+      }
+    });
+  }
 }