Feat/add informative tooltips (#178)

* Added TooltipManager to centralize tooltip information and display
tooltips dynamically.

* Tooltips activate on mouse hover, improving the user experience.

* Tooltips are used by passing the component and the corresponding
dictionary key for the tooltip content.
      TooltipManager.getInstance().attachTooltip(button, id);


![image](https://github.com/user-attachments/assets/10b67595-ef33-4aff-b886-f49a49c0b99b)

* Added an option in the configuration to enable or disable tooltips.


![image](https://github.com/user-attachments/assets/80395adf-e6b7-42c3-a29f-b98a7db7f1f1)

* Updated the UI and modified dropdowns to allow tooltips for each
option.


![image](https://github.com/user-attachments/assets/16661c1d-6331-44c3-b40e-470ae860fe9a)

Author: pgallino

src/config.ts

@@ -1,6 +1,7 @@
 import { GlobalContext } from "./context";
+import { TooltipManager } from "./graphics/renderables/tooltip_manager";
 import { deselectElement } from "./types/viewportManager";
-import { Colors } from "./utils";
+import { Colors } from "./utils/utils";
 
 export class ConfigModal {
   private ctx: GlobalContext;
@@ -11,6 +12,9 @@ export class ConfigModal {
   private colorPicker: HTMLInputElement | null;
   private selectedColor: number; // Stores the actual selected color as a number
   private tempColor: number; // Temporary color for selection
+  private enableTooltipsSwitch: HTMLInputElement | null;
+  private enableTooltips: boolean;
+  private tempEnableTooltips: boolean;
 
   constructor(ctx: GlobalContext) {
     this.ctx = ctx;
@@ -21,6 +25,8 @@ export class ConfigModal {
     this.colorPicker = null;
     this.selectedColor = Colors.Violet; // Default saved color
     this.tempColor = this.selectedColor; // Temporary color for selection
+    this.enableTooltips = true; // Default saved value
+    this.tempEnableTooltips = this.enableTooltips; // Temporary value for selection
 
     this.createModal();
     this.setupEventListeners();
@@ -71,28 +77,11 @@ export class ConfigModal {
                   <input type="color" id="colorPicker">
                 </li>
                 <li class="setting-item">
-                  <label for="autoConnections">Auto Connections</label>
-                  <input type="checkbox" id="autoConnections" class="switch-input">
-                </li>
-                <li class="setting-item">
-                  <label for="autoConnections">Config_1</label>
-                  <input type="checkbox" id="Config_1" class="switch-input">
-                </li>
-                <li class="setting-item">
-                  <label for="autoConnections">Config_2</label>
-                  <input type="checkbox" id="Config_2" class="switch-input">
-                </li>
-                <li class="setting-item">
-                  <label for="autoConnections">Config_3</label>
-                  <input type="checkbox" id="Config_3" class="switch-input">
-                </li>
-                <li class="setting-item">
-                  <label for="autoConnections">Config_4</label>
-                  <input type="checkbox" id="Config_4" class="switch-input">
-                </li>
-                <li class="setting-item">
-                  <label for="autoConnections">Config_5</label>
-                  <input type="checkbox" id="Config_5" class="switch-input">
+                  <label for="enableTooltips">Enable Tooltips</label>
+                  <label class="switch">
+                    <input type="checkbox" id="enableTooltips" class="switch-input" checked>
+                    <span class="switch-slider"></span>
+                  </label>
                 </li>
               </ul>
             </div>
@@ -119,6 +108,9 @@ export class ConfigModal {
     this.colorPicker = document.getElementById(
       "colorPicker",
     ) as HTMLInputElement;
+    this.enableTooltipsSwitch = document.getElementById(
+      "enableTooltips",
+    ) as HTMLInputElement;
   }
 
   private setupEventListeners() {
@@ -127,7 +119,8 @@ export class ConfigModal {
       !this.modalContent ||
       !this.closeBtn ||
       !this.saveSettingsButton ||
-      !this.colorPicker
+      !this.colorPicker ||
+      !this.enableTooltipsSwitch
     ) {
       console.error("Some modal elements were not found.");
       return;
@@ -153,6 +146,12 @@ export class ConfigModal {
         this.tempColor = this.hexToNumber(this.colorPicker.value);
       }
     };
+
+    this.enableTooltipsSwitch.onchange = () => {
+      const isEnabled = this.enableTooltipsSwitch?.checked || false;
+      this.tempEnableTooltips = isEnabled; // Update the local variable only
+      console.log("Tooltips setting changed (not saved yet):", isEnabled);
+    };
   }
 
   private setUpShortCuts() {
@@ -187,6 +186,12 @@ export class ConfigModal {
         this.colorPicker.value = this.toHex(this.selectedColor);
       }
 
+      // Update tooltips setting to the saved value
+      if (this.enableTooltipsSwitch) {
+        this.tempEnableTooltips = this.enableTooltips;
+        this.enableTooltipsSwitch.checked = this.tempEnableTooltips; // Reflect the saved value in the UI
+      }
+
       this.modalOverlay.style.display = "flex"; // Make it visible first
       setTimeout(() => {
         this.modalOverlay?.classList.add("show");
@@ -212,6 +217,12 @@ export class ConfigModal {
         }
       }, 300);
     }
+
+    // Reset tooltips setting to the saved value
+    if (this.enableTooltipsSwitch) {
+      this.tempEnableTooltips = this.enableTooltips; // Reset temp value
+      this.enableTooltipsSwitch.checked = this.enableTooltips; // Reflect saved value in UI
+    }
   }
 
   private saveSettings() {
@@ -221,7 +232,19 @@ export class ConfigModal {
       this.ctx.change_select_color(this.selectedColor);
     }
 
-    console.log("Settings saved. Applied color:", this.selectedColor);
+    // Save the tooltips setting
+    if (this.enableTooltipsSwitch) {
+      this.enableTooltips = this.tempEnableTooltips; // Save the temporary value
+      this.ctx.change_enable_tooltips(this.enableTooltips); // Update the GlobalContext
+      TooltipManager.getInstance().updateTooltipsState(); // Update tooltips state in the app
+    }
+
+    console.log(
+      "Settings saved. Applied color:",
+      this.selectedColor,
+      "Tooltips enabled:",
+      this.enableTooltips,
+    );
   }
 
   // Convert a number (0xRRGGBB) to a hex string ("#RRGGBB")

src/context.ts

@@ -15,7 +15,7 @@ import {
   MacAddress,
   MacAddressGenerator,
 } from "./packets/ethernet";
-import { Colors } from "./utils";
+import { Colors } from "./utils/utils";
 
 export class GlobalContext {
   private viewport: Viewport = null;
@@ -26,9 +26,11 @@ export class GlobalContext {
   private ipGenerator: IpAddressGenerator;
   private macGenerator: MacAddressGenerator;
   private selectColor: number;
+  private tooltipsEnabled: boolean;
 
   constructor(viewport: Viewport) {
     this.selectColor = Colors.Violet;
+    this.tooltipsEnabled = true;
     this.viewport = viewport;
 
     // Sets the initial datagraph and viewgraph
@@ -192,4 +194,12 @@ export class GlobalContext {
   public get_select_color() {
     return this.selectColor;
   }
+
+  public change_enable_tooltips(enabled: boolean) {
+    this.tooltipsEnabled = enabled;
+  }
+
+  public get_enable_tooltips() {
+    return this.tooltipsEnabled;
+  }
 }

src/graphics/canvas.ts

@@ -0,0 +1,69 @@
+import { TOOLTIP_KEYS } from "../utils/constants/tooltips_constants";
+import { TooltipManager } from "./renderables/tooltip_manager";
+
+export function createLayerSelector(
+  options: { value: string; text: string }[],
+  onchange: (value: string, event: Event) => void = () => undefined,
+) {
+  const container = document.createElement("div");
+  container.classList.add("layer-selector-container");
+
+  const dropdown = document.createElement("div");
+  dropdown.classList.add("custom-dropdown", "layerselectordropdown");
+
+  const selected = document.createElement("div");
+  // Attach tooltip to the selector
+  TooltipManager.getInstance().attachTooltip(
+    selected,
+    TOOLTIP_KEYS.LAYER_SELECTOR,
+  );
+  selected.classList.add("selected-option");
+  selected.textContent = TOOLTIP_KEYS.LINK_LAYER;
+  dropdown.appendChild(selected);
+
+  const optionsContainer = document.createElement("div");
+  optionsContainer.classList.add("options-container");
+
+  let selectedValue: string | null = "link";
+
+  options.forEach((optionData) => {
+    const option = document.createElement("div");
+    option.classList.add("dropdown-option");
+    option.textContent = optionData.text;
+
+    TooltipManager.getInstance().attachTooltip(option, optionData.text, true);
+
+    option.onclick = (e) => {
+      selected.textContent = optionData.text;
+      selectedValue = optionData.value;
+      optionsContainer.classList.remove("show");
+      onchange(optionData.value, e);
+    };
+
+    optionsContainer.appendChild(option);
+  });
+
+  selected.onclick = (e) => {
+    e.stopPropagation();
+    optionsContainer.classList.toggle("show");
+  };
+
+  document.addEventListener("click", () => {
+    optionsContainer.classList.remove("show");
+  });
+
+  dropdown.appendChild(optionsContainer);
+  container.appendChild(dropdown);
+
+  return {
+    container,
+    getValue: () => selectedValue,
+    setValue: (value: string) => {
+      const option = options.find((opt) => opt.value === value);
+      if (option) {
+        selected.textContent = option.text;
+        selectedValue = option.value;
+      }
+    },
+  };
+}

src/graphics/left_bar.ts

@@ -5,6 +5,7 @@ import { addDevice } from "../types/viewportManager";
 import { GlobalContext } from "../context";
 import { DeviceType } from "../types/devices/device";
 import { Layer, layerFromName } from "../types/devices/layer";
+import { TooltipManager } from "./renderables/tooltip_manager";
 
 export class LeftBar {
   private leftBar: HTMLElement;
@@ -25,6 +26,7 @@ export class LeftBar {
     button.setAttribute("title", label); // Shows Text
 
     button.onclick = onClick;
+    TooltipManager.getInstance().attachTooltip(button, label);
     this.leftBar.appendChild(button);
 
     const img = document.createElement("img");

src/graphics/renderables/device_info.ts

@@ -4,6 +4,7 @@ import { DeviceType } from "../../types/devices/device";
 import { ViewGraph } from "../../types/graphs/viewgraph";
 import { RemoveDeviceMove } from "../../types/undo-redo";
 import { urManager } from "../../types/viewportManager";
+import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
 import { createRightBarButton, createRoutingTable } from "../right_bar";
 import { ProgramInfo } from "./program_info";
 import { ProgramRunnerInfo } from "./program_runner_info";
@@ -27,21 +28,21 @@ export class DeviceInfo extends StyledInfo {
     const connections = this.device.viewgraph
       .getConnections(id)
       .map((edge) => edge.otherEnd(id));
-    super.addField("ID", id.toString());
-    super.addField("MacAddress", mac.toString());
-    super.addListField("Connected Devices", connections);
+    super.addField(TOOLTIP_KEYS.ID, id.toString());
+    super.addField(TOOLTIP_KEYS.MAC_ADDRESS, mac.toString());
+    super.addListField(TOOLTIP_KEYS.CONNECTED_DEVICES, connections);
   }
 
   private addCommonButtons() {
     this.inputFields.push(
       createRightBarButton(
-        "Connect device",
+        TOOLTIP_KEYS.CONNECT_DEVICE,
         () => this.device.selectToConnect(),
         "right-bar-connect-button",
         true,
       ),
       createRightBarButton(
-        "Delete device",
+        TOOLTIP_KEYS.DELETE_DEVICE,
         () => {
           const currLayer = this.device.viewgraph.getLayer();
           const move = new RemoveDeviceMove(currLayer, this.device.id);
@@ -68,8 +69,8 @@ export class DeviceInfo extends StyledInfo {
     ]);
 
     const dynamicTable = createRoutingTable(
-      "Routing Table",
-      ["IP", "Mask", "Interface"],
+      TOOLTIP_KEYS.ROUTING_TABLE,
+      [TOOLTIP_KEYS.IP, TOOLTIP_KEYS.MASK, TOOLTIP_KEYS.INTERFACE],
       rows,
       viewgraph,
       deviceId,

src/graphics/renderables/program_info.ts

@@ -2,14 +2,10 @@ import { DeviceId } from "../../types/graphs/datagraph";
 import { ViewGraph } from "../../types/graphs/viewgraph";
 import { createDropdown, Renderable } from "../right_bar";
 
-interface HasValue {
-  value: string;
-}
-
 export class ProgramInfo implements Renderable {
   readonly name: string;
   private inputs: Node[] = [];
-  private inputsValues: HasValue[] = [];
+  private inputsValues: (() => string)[] = [];
 
   constructor(name: string) {
     this.name = name;
@@ -20,13 +16,14 @@ export class ProgramInfo implements Renderable {
   }
 
   withDropdown(name: string, options: { value: string; text: string }[]) {
-    const dropdown = createDropdown(name, options);
-    this.inputs.push(dropdown);
-    this.inputsValues.push(dropdown.querySelector("select"));
+    const { container, getValue } = createDropdown(name, options);
+    this.inputs.push(container);
+    this.inputsValues.push(getValue);
   }
-
   getInputValues() {
-    return this.inputsValues.map(({ value }) => value);
+    console.log("getInputValues", this.inputsValues);
+
+    return this.inputsValues.map((getValue) => getValue());
   }
 
   toHTML() {

src/graphics/renderables/program_runner_info.ts

@@ -1,4 +1,5 @@
 import { ProgramRunner, RunningProgram } from "../../programs";
+import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
 import {
   createDropdown,
   createRightBarButton,
@@ -33,22 +34,31 @@ export class ProgramRunnerInfo implements Renderable {
     const selectProgramDropdown = createDropdown(
       "Program",
       programOptions,
-      "program-selector",
       (v) => {
         selectedProgram = programs[parseInt(v)];
+        console.log("Selected program: ", selectedProgram.name);
         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();
-    });
+    const startProgramButton = createRightBarButton(
+      TOOLTIP_KEYS.START_PROGRAM,
+      () => {
+        const { name } = selectedProgram;
+        console.log("Started program: ", name);
+        const inputs = selectedProgram.getInputValues();
+        // Validar que se hayan proporcionado todas las entradas necesarias
+        if (inputs.some((input) => input === null || input === undefined)) {
+          console.error("Some inputs are missing or invalid.");
+          return;
+        }
+        this.runner.addRunningProgram(name, inputs);
+        this.refreshTable();
+      },
+      "right-bar-start-button",
+    );
     this.inputFields.push(
-      selectProgramDropdown,
+      selectProgramDropdown.container,
       programInputs,
       startProgramButton,
     );
@@ -57,6 +67,7 @@ export class ProgramRunnerInfo implements Renderable {
   private addRunningProgramsList() {
     this.runningProgramsTable = this.generateProgramsTable();
     this.inputFields.push(this.runningProgramsTable);
+    this.inputFields.push(document.createElement("br"));
   }
 
   private createProgramsTable(