refactor: move program list styling to ProgramRunnerInfo (#134)

Depends on #129

This PR refactors the programs list logic to a new `ProgramRunnerInfo`
class and fixes some issues.

Author: MegaRedHand

src/graphics/renderables/device_info.ts

@@ -3,14 +3,10 @@ import { Device } from "../../types/devices";
 import { DeviceType } from "../../types/devices/device";
 import { ViewGraph } from "../../types/graphs/viewgraph";
 import { RemoveDeviceMove } from "../../types/undo-redo";
-import { refreshElement, urManager } from "../../types/viewportManager";
-import {
-  createDropdown,
-  createRightBarButton,
-  createTable,
-  createRoutingTable,
-} from "../right_bar";
+import { urManager } from "../../types/viewportManager";
+import { createRightBarButton, createRoutingTable } from "../right_bar";
 import { ProgramInfo } from "./program_info";
+import { ProgramRunnerInfo } from "./program_runner_info";
 import { StyledInfo } from "./styled_info";
 
 export { ProgramInfo } from "./program_info";
@@ -60,28 +56,8 @@ export class DeviceInfo extends StyledInfo {
 
   // First argument is to avoid a circular dependency
   addProgramRunner(runner: ProgramRunner, programs: ProgramInfo[]) {
-    const programOptions = programs.map(({ name }, i) => {
-      return { value: i.toString(), text: name };
-    });
-    const inputsContainer = document.createElement("div");
-    let selectedProgram = programs[0];
-    inputsContainer.replaceChildren(...selectedProgram.toHTML());
-    this.inputFields.push(
-      // Dropdown for selecting program
-      createDropdown("Program", programOptions, "program-selector", (v) => {
-        selectedProgram = programs[parseInt(v)];
-        inputsContainer.replaceChildren(...selectedProgram.toHTML());
-      }),
-      inputsContainer,
-      // Button to send a packet
-      createRightBarButton("Start program", () => {
-        const { name } = selectedProgram;
-        console.log("Started program: ", name);
-        const inputs = selectedProgram.getInputValues();
-        runner.addRunningProgram(name, inputs);
-        refreshElement();
-      }),
-    );
+    const programRunnerInfo = new ProgramRunnerInfo(runner, programs);
+    this.inputFields.push(...programRunnerInfo.toHTML());
   }
 
   addRunningProgramsList(

src/graphics/renderables/program_runner_info.ts

@@ -0,0 +1,105 @@
+import { ProgramRunner, RunningProgram } from "../../programs";
+import {
+  createDropdown,
+  createRightBarButton,
+  createTable,
+  Renderable,
+} from "../right_bar";
+import { ProgramInfo } from "./program_info";
+
+export class ProgramRunnerInfo implements Renderable {
+  private runner: ProgramRunner;
+
+  private inputFields: Node[] = [];
+
+  private runningProgramsTable: HTMLTableElement;
+
+  constructor(runner: ProgramRunner, programInfos: ProgramInfo[]) {
+    this.runner = runner;
+
+    this.addPrograms(programInfos);
+    this.addRunningProgramsList();
+  }
+
+  private addPrograms(programs: ProgramInfo[]) {
+    let selectedProgram = programs[0];
+
+    const programOptions = programs.map(({ name }, i) => {
+      return { value: i.toString(), text: name };
+    });
+    const programInputs = document.createElement("div");
+    programInputs.replaceChildren(...selectedProgram.toHTML());
+    // Dropdown for selecting program
+    const selectProgramDropdown = createDropdown(
+      "Program",
+      programOptions,
+      "program-selector",
+      (v) => {
+        selectedProgram = programs[parseInt(v)];
+        programInputs.replaceChildren(...selectedProgram.toHTML());
+      },
+    );
+    // Button to run program
+    const startProgramButton = createRightBarButton("Start program", () => {
+      const { name } = selectedProgram;
+      console.log("Started program: ", name);
+      const inputs = selectedProgram.getInputValues();
+      this.runner.addRunningProgram(name, inputs);
+      this.refreshTable();
+    });
+    this.inputFields.push(
+      selectProgramDropdown,
+      programInputs,
+      startProgramButton,
+    );
+  }
+
+  private addRunningProgramsList() {
+    this.runningProgramsTable = this.generateProgramsTable();
+    this.inputFields.push(this.runningProgramsTable);
+  }
+
+  private createProgramsTable(
+    runner: ProgramRunner,
+    runningPrograms: RunningProgram[],
+  ) {
+    const onDelete = (row: number) => {
+      const { pid } = runningPrograms[row];
+      const removedProgram = runner.removeRunningProgram(pid);
+      runningPrograms = runningPrograms.filter((p) => p.pid !== pid);
+      if (runningPrograms.length === 0) {
+        this.refreshTable();
+      }
+      return removedProgram;
+    };
+    const rows = runningPrograms.map((program) => [
+      program.pid.toString(),
+      program.name,
+      JSON.stringify(program.inputs),
+    ]);
+    const headers = ["PID", "Name", "Inputs"];
+    // TODO: make table editable?
+    const table = createTable(headers, rows, { onDelete });
+    table.classList.add("right-bar-table");
+    return table;
+  }
+
+  private refreshTable() {
+    const newTable = this.generateProgramsTable();
+    this.runningProgramsTable.replaceWith(newTable);
+    this.runningProgramsTable = newTable;
+  }
+
+  private generateProgramsTable() {
+    const runningPrograms = this.runner.getRunningPrograms();
+    if (runningPrograms.length === 0) {
+      return document.createElement("table");
+    } else {
+      return this.createProgramsTable(this.runner, runningPrograms);
+    }
+  }
+
+  toHTML() {
+    return this.inputFields;
+  }
+}

src/programs/index.ts

@@ -13,8 +13,26 @@ export interface RunningProgram {
 
 // Currently used only for Host, due to a circular dependency
 export interface ProgramRunner {
-  addRunningProgram(name: string, inputs: string[]): void;
-  removeRunningProgram(pid: Pid): void;
+  /**
+   * Adds a new program to run.
+   * @param name program name
+   * @param inputs program inputs
+   * @returns the running program data
+   */
+  addRunningProgram(name: string, inputs: string[]): RunningProgram;
+
+  /**
+   * Lists running programs.
+   * @returns the list of running programs
+   */
+  getRunningPrograms(): RunningProgram[];
+
+  /**
+   * Stops a running program.
+   * @param pid running program ID
+   * @returns `true` if the program exists and was stopped, `false` otherwise
+   */
+  removeRunningProgram(pid: Pid): boolean;
 }
 
 export interface Program {

src/types/devices/host.ts

@@ -48,7 +48,6 @@ export class Host extends Device {
     const info = new DeviceInfo(this);
     info.addField("IP Address", this.ip.octets.join("."));
     info.addProgramRunner(this, programList);
-    info.addRunningProgramsList(this, runningProgramsList);
     RightBar.getInstance().renderInfo(info);
   }
 
@@ -78,6 +77,7 @@ export class Host extends Device {
       device.runningPrograms.push(runningProgram);
     });
     this.runProgram(runningProgram);
+    return runningProgram;
   }
 
   removeRunningProgram(pid: Pid) {
@@ -93,13 +93,14 @@ export class Host extends Device {
     const program = this.runningPrograms.get(pid);
     if (!program) {
       console.error("Program not found");
-      return;
+      return false;
     }
     program.stop();
     this.runningPrograms.delete(pid);
+    return true;
   }
 
-  private getRunningPrograms() {
+  getRunningPrograms() {
     const thisDevice = this.viewgraph.getDataGraph().getDevice(this.id);
     if (!isHost(thisDevice)) {
       console.error("Node is not a Host");