feat: store Host programs in datagraph (#98)

This PR stores the programs running on Hosts inside the datagraph. This
makes it persistent between layer changes and sessions.

Author: MegaRedHand

src/context.ts

@@ -33,6 +33,9 @@ export class GlobalContext {
   private setNetwork(datagraph: DataGraph, layer: Layer) {
     this.datagraph = datagraph;
     this.viewport.clear();
+    if (this.viewgraph) {
+      this.viewgraph.destroy();
+    }
     this.viewgraph = new ViewGraph(this.datagraph, this.viewport, layer);
     this.setIpGenerator();
   }

src/graphics/renderables/device_info.ts

@@ -1,6 +1,5 @@
 import { Device } from "../../types/devices";
 import { DeviceType } from "../../types/devices/device";
-import { CreateDevice } from "../../types/devices/utils";
 import { RoutingTableEntry } from "../../types/graphs/datagraph";
 import { RemoveDeviceMove } from "../../types/undo-redo";
 import { urManager } from "../../types/viewportManager";
@@ -46,18 +45,8 @@ export class DeviceInfo extends StyledInfo {
       createRightBarButton(
         "Delete device",
         () => {
-          const deviceData: CreateDevice = {
-            id: this.device.id,
-            type: this.device.getType(),
-            x: this.device.x,
-            y: this.device.y,
-            ip: this.device.ip.toString(),
-            mask: this.device.ipMask.toString(),
-          };
-          const move = new RemoveDeviceMove(
-            deviceData,
-            this.device.getConnections(),
-          );
+          const deviceData = this.device.getCreateDevice();
+          const move = new RemoveDeviceMove(deviceData);
           this.device.delete();
           urManager.push(move);
         },

src/index.ts

@@ -4,6 +4,7 @@ import {
   deselectElement,
   loadFromFile,
   saveToFile,
+  saveToLocalStorage,
   urManager,
 } from "./types/viewportManager";
 import { DataGraph } from "./types/graphs/datagraph";
@@ -116,7 +117,6 @@ async function loadAssets(otherPromises: Promise<void>[]) {
   undoIcon.alt = "Undo Icon";
   undoButton.appendChild(undoIcon);
 
-  console.log(undoIcon.style.filter);
   urManager.suscribe(() => {
     undoButton.disabled = !urManager.canUndo();
     undoIcon.style.opacity = urManager.canUndo() ? "1" : "0.5"; // Full opacity for active, reduced for inactive
@@ -208,6 +208,7 @@ async function loadAssets(otherPromises: Promise<void>[]) {
 
     if (selectedLayer) {
       ctx.changeViewGraph(selectedLayer);
+      saveToLocalStorage(ctx);
       // LeftBar is reset
       leftBar.setButtonsByLayer(selectedLayer);
       deselectElement();

src/types/devices/device.ts

@@ -18,9 +18,10 @@ import { Colors, ZIndexLevels } from "../../utils";
 import { Position } from "../common";
 import { DeviceInfo } from "../../graphics/renderables/device_info";
 import { IpAddress } from "../../packets/ip";
-import { DeviceId } from "../graphs/datagraph";
 import { DragDeviceMove, AddEdgeMove } from "../undo-redo";
+import { DeviceId } from "../graphs/datagraph";
 import { Layer } from "./layer";
+import { CreateDevice } from "./utils";
 
 export { Layer } from "./layer";
 
@@ -103,6 +104,12 @@ export abstract class Device extends Sprite {
     return Array.from(this.connections.values());
   }
 
+  /// Returns the data needed to create the device
+  getCreateDevice(): CreateDevice {
+    const node = this.viewgraph.getDataGraph().getDevice(this.id);
+    return { id: this.id, node };
+  }
+
   addConnection(adyacentId: DeviceId) {
     this.connections.add(adyacentId);
   }
@@ -235,6 +242,11 @@ export abstract class Device extends Sprite {
     Device.connectionTarget = null;
   }
 
+  // Cleans up related resources
+  destroy() {
+    // do nothing
+  }
+
   // Return the device’s type.
   abstract getType(): DeviceType;
 

src/types/devices/host.ts

@@ -9,11 +9,18 @@ import { sendPacket } from "../packet";
 import { Ticker } from "pixi.js";
 import { DeviceId } from "../graphs/datagraph";
 import { Layer } from "./layer";
+import { isHost, RunningProgram } from "../graphs/datagraph";
 
 const DEFAULT_ECHO_DELAY = 250; // ms
 
+const ECHO_SERVER_NAME = "Echo server";
+
+type ProgramTicker = (ticker: Ticker) => void;
+type Pid = number;
+
 export class Host extends Device {
-  currentProgram: (ticker: Ticker) => void = undefined;
+  private runningPrograms = new Map<Pid, ProgramTicker>();
+  private programId = 0;
 
   constructor(
     id: DeviceId,
@@ -23,6 +30,7 @@ export class Host extends Device {
     mask: IpAddress,
   ) {
     super(id, PcImage, viewgraph, position, ip, mask);
+    this.loadRunningPrograms();
   }
 
   showInfo(): void {
@@ -53,30 +61,58 @@ export class Host extends Device {
     );
     const destination = dropdownContainer.querySelector("select");
 
+    // TODO: extract into classes
     const programList: ProgramInfo[] = [
-      { name: "No program", start: () => this.stopProgram() },
       {
         name: "Send ICMP echo",
         inputs: [dropdownContainer],
         start: () => this.sendSingleEcho(destination.value),
       },
       {
-        name: "Echo server",
+        name: ECHO_SERVER_NAME,
         inputs: [dropdownContainer],
-        start: () => this.startEchoServer(destination.value),
+        start: () => this.startNewEchoServer(destination.value),
       },
     ];
     return programList;
   }
 
-  sendSingleEcho(id: string) {
-    this.stopProgram();
+  private addRunningProgram(program: RunningProgram) {
+    this.viewgraph.getDataGraph().modifyDevice(this.id, (device) => {
+      if (!isHost(device)) {
+        console.error("Node is not a Host");
+        return;
+      }
+      device.runningPrograms.push(program);
+    });
+  }
+
+  private loadRunningPrograms() {
+    const device = this.viewgraph.getDataGraph().getDevice(this.id);
+    if (!isHost(device)) {
+      console.error("Node is not a Host");
+      return;
+    }
+    device.runningPrograms.forEach((program) => {
+      if (program.name !== ECHO_SERVER_NAME) {
+        console.error("Unknown program: ", program.name);
+        return;
+      }
+      this.startEchoServer(program.inputs[0]);
+    });
+  }
+
+  private sendSingleEcho(id: string) {
     const dst = parseInt(id);
     sendPacket(this.viewgraph, "ICMP", this.id, dst);
   }
 
-  startEchoServer(id: string) {
-    this.stopProgram();
+  private startNewEchoServer(id: string) {
+    this.addRunningProgram({ name: "Echo server", inputs: [id] });
+    this.startEchoServer(id);
+  }
+
+  private startEchoServer(id: string) {
     const dst = parseInt(id);
     let progress = 0;
     const send = (ticker: Ticker) => {
@@ -88,13 +124,29 @@ export class Host extends Device {
       sendPacket(this.viewgraph, "ICMP", this.id, dst);
       progress -= delay;
     };
-    Ticker.shared.add(send, this);
-    this.currentProgram = send;
+    this.startProgram(send);
   }
 
-  stopProgram() {
-    if (this.currentProgram) {
-      Ticker.shared.remove(this.currentProgram, this);
+  private startProgram(tick: (ticker: Ticker) => void): Pid {
+    const pid = ++this.programId;
+    this.runningPrograms.set(pid, tick);
+    Ticker.shared.add(tick, this);
+    return pid;
+  }
+
+  // TODO: this is unused
+  stopProgram(pid: Pid) {
+    const tick = this.runningPrograms.get(pid);
+    if (!tick) {
+      console.error("Pid not found: ", pid);
+      return;
     }
+    Ticker.shared.remove(tick, this);
+    this.runningPrograms.delete(pid);
+  }
+
+  destroy() {
+    this.runningPrograms.forEach((tick) => Ticker.shared.remove(tick, this));
+    this.runningPrograms.clear();
   }
 }

src/types/devices/utils.ts

@@ -1,4 +1,5 @@
 import { IpAddress } from "../../packets/ip";
+import { GraphNode } from "../graphs/datagraph";
 import { DeviceId } from "../graphs/datagraph";
 import { ViewGraph } from "../graphs/viewgraph";
 import { Device, DeviceType } from "./device";
@@ -7,22 +8,18 @@ import { Router } from "./router";
 
 export interface CreateDevice {
   id: DeviceId;
-  type: DeviceType;
-  x: number;
-  y: number;
-  ip: string;
-  mask: string;
+  node: GraphNode;
 }
 
 export function createDevice(
   deviceInfo: CreateDevice,
   viewgraph: ViewGraph,
 ): Device {
-  const position: { x: number; y: number } = deviceInfo;
-  const ip = IpAddress.parse(deviceInfo.ip);
-  const mask = IpAddress.parse(deviceInfo.mask);
+  const position: { x: number; y: number } = deviceInfo.node;
+  const ip = IpAddress.parse(deviceInfo.node.ip);
+  const mask = IpAddress.parse(deviceInfo.node.mask);
 
-  switch (deviceInfo.type) {
+  switch (deviceInfo.node.type) {
     case DeviceType.Router:
       return new Router(deviceInfo.id, viewgraph, position, ip, mask);
     case DeviceType.Host:

src/types/graphs/datagraph.ts

@@ -22,14 +22,28 @@ export interface RoutingTableEntry {
   iface: DeviceId;
 }
 
+interface HostGraphNode extends CommonGraphNode {
+  type: DeviceType.Host;
+  runningPrograms: RunningProgram[];
+}
+
+export interface RunningProgram {
+  name: string;
+  inputs: string[];
+}
+
 // Typescript type guard
 export function isRouter(node: GraphNode): node is RouterGraphNode {
   return node.type === DeviceType.Router;
 }
 
-export type GraphNode = CommonGraphNode | RouterGraphNode;
+export function isHost(node: GraphNode): node is HostGraphNode {
+  return node.type === DeviceType.Host;
+}
+
+export type GraphNode = CommonGraphNode | RouterGraphNode | HostGraphNode;
 
-export type GraphDataNode = CommonDataNode | RouterDataNode;
+export type GraphDataNode = CommonDataNode | RouterDataNode | HostDataNode;
 
 interface CommonDataNode {
   id: DeviceId;
@@ -46,6 +60,11 @@ interface RouterDataNode extends CommonDataNode {
   routingTable: RoutingTableEntry[];
 }
 
+interface HostDataNode extends CommonDataNode {
+  type: DeviceType.Host;
+  runningPrograms: RunningProgram[];
+}
+
 export type GraphData = GraphDataNode[];
 
 export interface NewDevice {
@@ -92,8 +111,8 @@ export class DataGraph {
       };
       if (isRouter(info)) {
         graphData.push({ ...graphNode, routingTable: info.routingTable });
-      } else {
-        graphData.push(graphNode);
+      } else if (isHost(info)) {
+        graphData.push({ ...graphNode, runningPrograms: info.runningPrograms });
       }
     });
     return graphData;
@@ -106,6 +125,7 @@ export class DataGraph {
       ...deviceInfo,
       connections: new Set<number>(),
       routingTable: [],
+      runningPrograms: [],
     };
     this.devices.set(id, graphnode);
     console.log(`Device added with ID ${id}`);
@@ -172,10 +192,21 @@ export class DataGraph {
     this.notifyChanges();
   }
 
+  // Get a device by its ID.
+  // WARNING: don't modify the device directly, use `modifyDevice` instead
   getDevice(id: DeviceId): GraphNode | undefined {
     return this.devices.get(id);
   }
 
+  // Modify a device in the graph, notifying subscribers of any changes
+  modifyDevice(id: DeviceId, fn: (d: GraphNode | undefined) => void) {
+    const device = this.devices.get(id);
+    fn(device);
+    if (device) {
+      this.notifyChanges();
+    }
+  }
+
   // Get all connections of a device
   getConnections(id: DeviceId): DeviceId[] {
     const deviceInfo = this.devices.get(id);
@@ -292,9 +323,8 @@ export class DataGraph {
       });
     }
 
-    console.log(parents);
-
     const table: RoutingTableEntry[] = [];
+
     parents.forEach((currentId, childId) => {
       const dstId = childId;
       if (dstId === id) {