Feat/alerts (#195)

This pull request introduces a new alert system to provide user feedback
across various components. The changes include the addition of an
`AlertManager` class, new alert messages, and the integration of alerts
into existing functionalities.

Key changes:

### Introduction of Alert System:
*
[`src/graphics/renderables/alert_manager.ts`](diffhunk://#diff-fd1a555a03e7967c9ee25646492276930d53e717b2afa03416a951f9b41a48a4R1-R60):
Added `AlertManager` class and `AlertType` enum to manage and display
alerts.
*
[`src/utils/constants/alert_constants.ts`](diffhunk://#diff-eb40c98ea3835dbb2ac2f0e377bdaf16ab581142e74f7d24ecb4e87608ba36b1R1-R16):
Defined constant alert messages for various scenarios.
*
[`src/styles/alert.css`](diffhunk://#diff-dda8bc7a5a268e288d796962edb5124a791c788e8a2e6cb6d84d66946d9f2253R1-R63):
Added CSS styles for alert messages.




![image](https://github.com/user-attachments/assets/ea8eeedf-a82d-4502-962c-2c95af5dac54)


![image](https://github.com/user-attachments/assets/4ee72474-c3f9-49a2-95e9-eacbc0d5f531)


![image](https://github.com/user-attachments/assets/3ef49af6-058f-4482-b2d8-6869977e6c12)

---------

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

Author: pgallino

src/graphics/basic_components/parameter_editor.ts

@@ -1,4 +1,6 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
+import { ALERT_MESSAGES } from "../../utils/constants/alert_constants";
+import { showError, showSuccess } from "../renderables/alert_manager";
 import { TooltipManager } from "../renderables/tooltip_manager";
 
 export interface EditableParameter {
@@ -51,10 +53,14 @@ export class ParameterEditor {
           : (input.value as string);
 
       if (input.value === "") {
+        showError(ALERT_MESSAGES.EMPTY_INPUT);
+        input.value = previousValue.toString();
+      } else if (input.type === "number" && isNaN(newValue as number)) {
         input.value = previousValue.toString();
       } else {
         previousValue = newValue;
         onChange(newValue);
+        showSuccess(ALERT_MESSAGES.PARAMETER_UPDATED);
       }
     });
 

src/graphics/renderables/alert_manager.ts

@@ -0,0 +1,53 @@
+let alertTimeout: NodeJS.Timeout | null = null;
+
+export enum AlertType {
+  Success = "alert-success",
+  Warning = "alert-warning",
+  Error = "alert-error",
+}
+
+function showAlert(message: string, type: AlertType, duration = 3000): void {
+  // Clear any existing alert timeout
+  if (alertTimeout) {
+    clearTimeout(alertTimeout);
+    alertTimeout = null;
+  }
+
+  // Create the alert container if it doesn't exist
+  let alertContainer = document.getElementById("global-alert");
+  if (!alertContainer) {
+    alertContainer = document.createElement("div");
+    alertContainer.id = "global-alert";
+    alertContainer.classList.add("alert-container");
+    document.body.appendChild(alertContainer);
+  }
+
+  // Set the alert content and type
+  alertContainer.textContent = message;
+  alertContainer.className = `alert-container ${type} show`;
+
+  // Automatically hide the alert after the specified duration
+  alertTimeout = setTimeout(() => {
+    hideAlert();
+  }, duration);
+}
+
+function hideAlert(): void {
+  const alertContainer = document.getElementById("global-alert");
+  if (alertContainer) {
+    alertContainer.classList.remove("show");
+    alertContainer.textContent = ""; // Clear the content
+  }
+}
+
+export function showSuccess(message: string, duration?: number): void {
+  showAlert(message, AlertType.Success, duration);
+}
+
+export function showError(message: string, duration?: number): void {
+  showAlert(message, AlertType.Error, duration);
+}
+
+export function showWarning(message: string, duration?: number): void {
+  showAlert(message, AlertType.Warning, duration);
+}

src/graphics/renderables/program_runner_info.ts

@@ -1,9 +1,11 @@
 import { ProgramRunner, RunningProgram } from "../../programs";
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
+import { ALERT_MESSAGES } from "../../utils/constants/alert_constants";
 import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
 import { Button } from "../basic_components/button";
 import { Dropdown } from "../basic_components/dropdown";
 import { Table } from "../basic_components/table";
+import { showError, showSuccess } from "./alert_manager";
 import { Renderable } from "./base_info";
 import { ProgramInfo } from "./device_info";
 import { TooltipManager } from "./tooltip_manager";
@@ -31,13 +33,12 @@ export class ProgramRunnerInfo implements Renderable {
     this.inputFields.push(labelElement);
   }
   private addPrograms(programs: ProgramInfo[]) {
-    let selectedProgram = programs[0];
+    let selectedProgram: ProgramInfo = null;
 
     const programOptions = programs.map(({ name }, i) => {
       return { value: i.toString(), text: name };
     });
     const programInputs = document.createElement("div");
-    programInputs.replaceChildren(...selectedProgram.toHTML());
 
     // Create the dropdown using the Dropdown class
     const selectProgramDropdown = new Dropdown({
@@ -54,13 +55,18 @@ export class ProgramRunnerInfo implements Renderable {
     const startProgramButton = new Button({
       text: TOOLTIP_KEYS.START_PROGRAM,
       onClick: () => {
+        if (!selectedProgram) {
+          showError(ALERT_MESSAGES.NO_PROGRAM_SELECTED);
+          return;
+        }
         const { name } = selectedProgram;
         const inputs = selectedProgram.getInputValues();
         if (inputs.some((input) => input === null || input === undefined)) {
-          console.error("Some inputs are missing or invalid.");
+          showError(ALERT_MESSAGES.START_PROGRAM_INVALID_INPUT);
           return;
         }
         this.runner.addRunningProgram(name, inputs);
+        showSuccess(ALERT_MESSAGES.PROGRAM_STARTED);
         this.refreshTable();
       },
       classList: [

src/graphics/renderables/routing_table.ts

@@ -6,6 +6,8 @@ import { DeviceId } from "../../types/graphs/datagraph";
 import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
 import { ROUTER_CONSTANTS } from "../../utils/constants/router_constants";
+import { ALERT_MESSAGES } from "../../utils/constants/alert_constants";
+import { showError, showSuccess } from "./alert_manager";
 
 export interface RoutingTableProps {
   rows: string[][]; // Rows for the table
@@ -107,6 +109,8 @@ export class RoutingTable {
     ]);
 
     this.updateRows(newRows);
+
+    showSuccess(ALERT_MESSAGES.ROUTING_TABLE_REGENERATED);
   }
 
   private setRoutingTableCallbacks(viewgraph: ViewGraph, deviceId: DeviceId) {
@@ -119,9 +123,9 @@ export class RoutingTable {
         isValid = isValidIP(newValue);
       else if (col === ROUTER_CONSTANTS.INTERFACE_COL_INDEX)
         isValid = isValidInterface(newValue);
-
       if (isValid) {
         viewgraph.getDataGraph().saveManualChange(deviceId, row, col, newValue);
+        showSuccess(ALERT_MESSAGES.ROUTING_TABLE_UPDATED);
       }
       return isValid;
     };
@@ -144,11 +148,19 @@ export class RoutingTable {
 function isValidIP(ip: string): boolean {
   const ipPattern =
     /^(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]?)$/;
-  return ipPattern.test(ip);
+  const result = ipPattern.test(ip);
+  if (!result) {
+    showError(ALERT_MESSAGES.INVALID_IP_MASK);
+  }
+  return result;
 }
 
 // Function to validate Interface format (ethX where X is a number)
 function isValidInterface(interfaceStr: string): boolean {
   const interfacePattern = /^eth[0-9]+$/;
-  return interfacePattern.test(interfaceStr);
+  const result = interfacePattern.test(interfaceStr);
+  if (!result) {
+    showError(ALERT_MESSAGES.INVALID_IFACE);
+  }
+  return result;
 }

src/handlers/layerSelectorHandler.ts

@@ -8,6 +8,8 @@ import {
 } from "../graphics/basic_components/dropdown";
 import { TOOLTIP_KEYS } from "../utils/constants/tooltips_constants";
 import { CSS_CLASSES } from "../utils/constants/css_constants";
+import { showSuccess } from "../graphics/renderables/alert_manager";
+import { ALERT_MESSAGES } from "../utils/constants/alert_constants";
 
 export class LayerHandler {
   private ctx: GlobalContext;
@@ -45,8 +47,9 @@ export class LayerHandler {
     });
 
     // Initialize the dropdown with the current layer
-    this.selectNewLayer(layerToName(this.ctx.getCurrentLayer()));
-    this.layerDropdown.setValue(layerToName(this.ctx.getCurrentLayer()));
+    const selectedLayer = layerToName(this.ctx.getCurrentLayer());
+    this.applyLayerChange(selectedLayer, false); // No success message on initialization
+    this.layerDropdown.setValue(selectedLayer);
   }
 
   private getLayerOptions(): DropdownOption[] {
@@ -67,10 +70,22 @@ export class LayerHandler {
   private selectNewLayer(selectedLayer: string | null) {
     if (!selectedLayer) return;
 
-    console.debug(`Layer selected: ${selectedLayer}`);
+    this.applyLayerChange(selectedLayer, true); // Show success message on layer change
+  }
+
+  /**
+   * Applies the layer change logic.
+   * @param selectedLayer - The layer to change to.
+   * @param showAlert - Whether to show a success message.
+   */
+  private applyLayerChange(selectedLayer: string, showAlert: boolean) {
     this.ctx.changeLayer(selectedLayer);
     saveToLocalStorage(this.ctx);
     this.leftBar.setButtonsByLayer(selectedLayer);
     deselectElement();
+
+    if (showAlert) {
+      showSuccess(ALERT_MESSAGES.LAYER_CHANGED, 7000);
+    }
   }
 }

src/index.ejs

@@ -16,6 +16,7 @@
 
     <div id="settingsModal"></div>
     <div id="global-tooltip" class="global-tooltip"></div>
+    <div id="global-alert" class="alert-container"></div>
 
     <div id="bottom-screen" class="row container">
       <div id="left-bar" class="left-bar"></div>

src/styles/alert.css

@@ -0,0 +1,63 @@
+/* Alert container */
+.alert-container {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed position on the screen */
+  top: 80%; /* Center vertically */
+  left: 40%; /* Center horizontally */
+  transform: translate(-50%, 0); /* Adjust position to center horizontally */
+  background: #ff4d4d; /* Default red background for errors */
+  color: #ffffff; /* White text */
+  padding: 15px 20px; /* Internal spacing */
+  border-radius: 8px; /* Rounded corners */
+  font-size: 1rem; /* Font size */
+  text-align: left;
+  z-index: 1000; /* Ensure it appears above other elements */
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Shadow effect */
+  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
+  max-width: 400px; /* Maximum width */
+  line-height: 1.5; /* Line spacing */
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Font family */
+  opacity: 0; /* Initially transparent */
+  transition:
+    opacity 0.3s ease-in-out,
+    transform 0.3s ease-in-out; /* Smooth transitions */
+}
+
+/* Show the alert */
+.alert-container.show {
+  display: block; /* Make it visible */
+  opacity: 1; /* Fully opaque */
+  transform: translate(-50%, 20px); /* Slightly lower position for animation */
+}
+
+/* Success alert */
+.alert-success {
+  background: #4caf50; /* Green background for success */
+}
+
+/* Warning alert */
+.alert-warning {
+  background: #ff9800; /* Orange background for warnings */
+}
+
+/* Error alert */
+.alert-error {
+  background: #f44336; /* Red background for errors */
+}
+
+@media (max-width: 768px) {
+  .alert-container {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 22.5rem;
+    max-height: 80vh;
+    font-size: 0.875rem;
+    overflow-y: scroll; /* Enable scrolling */
+    scrollbar-width: none; /* Hide scrollbar in Firefox */
+  }
+
+  .alert-container::-webkit-scrollbar {
+    display: none; /* Hide scrollbar in WebKit browsers */
+  }
+}

src/styles/index.ts

@@ -21,3 +21,4 @@ import "./slider.css";
 import "./divider.css";
 import "./progress-bar.css";
 import "./label.css";
+import "./alert.css";

src/types/graphs/datagraph.ts

@@ -11,6 +11,8 @@ import {
   DataRouter,
 } from "../data-devices";
 import { GlobalContext } from "../../context";
+import { ALERT_MESSAGES } from "../../utils/constants/alert_constants";
+import { showWarning } from "../../graphics/renderables/alert_manager";
 
 export type DeviceId = VertexId;
 
@@ -244,8 +246,8 @@ export class DataGraph {
       const unavailableDevices =
         n1Iface === null && n2Iface === null
           ? `devices ${n1Id} and ${n2Id}`
-          : `device ${n1Id === null ? n1Id : n2Id}`;
-      alert(`No free interfaces available for ${unavailableDevices}.`);
+          : `device ${n1Iface === null ? n1Id : n2Id}`;
+      showWarning(ALERT_MESSAGES.NO_FREE_INTERFACES(unavailableDevices));
       return null;
     }
     const edge = {

src/types/viewportManager.ts

@@ -19,6 +19,8 @@ import {
   RemoveEdgeMove,
 } from "./undo-redo";
 import { SpeedMultiplier } from "./speedMultiplier";
+import { showError, showSuccess } from "../graphics/renderables/alert_manager";
+import { ALERT_MESSAGES } from "../utils/constants/alert_constants";
 
 type Selectable = ViewDevice | Edge | Packet;
 
@@ -175,9 +177,18 @@ export function loadFromFile(ctx: GlobalContext) {
     reader.onload = (readerEvent) => {
       const jsonData = readerEvent.target.result as string;
       const graphData: GraphData = JSON.parse(jsonData);
-      ctx.load(DataGraph.fromData(graphData, ctx));
-      console.log("Graph loaded successfully.");
+      let dataGraph: DataGraph;
+      try {
+        dataGraph = DataGraph.fromData(graphData, ctx);
+      } catch (error) {
+        console.error("Failed to load graph data:", error);
+        showError(ALERT_MESSAGES.FAILED_TO_LOAD_GRAPH);
+        return;
+      }
+      ctx.load(dataGraph);
       ctx.centerView();
+
+      showSuccess(ALERT_MESSAGES.GRAPH_LOADED_SUCCESSFULLY);
     };
   };