refactor: replace TooltipManager usage with attachTooltip function (#198)

pgallino · web-flow · commit bc458de2d557 · 2025-04-12T11:30:55.000-03:00
This pull request refactors the tooltip management system by replacing
the `TooltipManager` singleton class with individual functions. The
changes involve updating all instances where `TooltipManager` methods
were used to use the new functions instead. This refactor aims to
simplify the code and improve maintainability.
diff --git a/src/config.ts b/src/config.ts
@@ -1,5 +1,5 @@
 import { GlobalContext } from "./context";
-import { TooltipManager } from "./graphics/renderables/tooltip_manager";
+import { updateTooltipsState } from "./graphics/renderables/tooltip_manager";
 import { deselectElement } from "./types/viewportManager";
 import { Colors } from "./utils/utils";
 
@@ -236,7 +236,7 @@ export class ConfigModal {
     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
+      updateTooltipsState(); // Update tooltips state in the app
     }
 
     console.log(
diff --git a/src/graphics/basic_components/button.ts b/src/graphics/basic_components/button.ts
@@ -1,4 +1,4 @@
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 
 export interface ButtonProps {
   text: string; // Button text
@@ -24,7 +24,7 @@ export class Button {
     }
 
     if (tooltip) {
-      TooltipManager.getInstance().attachTooltip(this.button, tooltip);
+      attachTooltip(this.button, tooltip);
     }
 
     this.button.onclick = onClick; // Assign the click handler
diff --git a/src/graphics/basic_components/dropdown.ts b/src/graphics/basic_components/dropdown.ts
@@ -1,5 +1,5 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 import { Label } from "./label";
 
 export interface DropdownOption {
@@ -57,7 +57,7 @@ export class Dropdown {
       ? `Select ${default_text}`
       : "Select option"; // Default text or fallback
     if (tooltip) {
-      TooltipManager.getInstance().attachTooltip(this.selected, tooltip);
+      attachTooltip(this.selected, tooltip);
     }
     dropdown.appendChild(this.selected);
 
@@ -96,7 +96,7 @@ export class Dropdown {
     const option = document.createElement("div");
     option.classList.add(CSS_CLASSES.DROPDOWN_OPTION);
     option.textContent = optionData.text;
-    TooltipManager.getInstance().attachTooltip(option, optionData.text, true);
+    attachTooltip(option, optionData.text, true);
 
     // Set up click event for option selection
     option.onclick = (e) => {
diff --git a/src/graphics/basic_components/label.ts b/src/graphics/basic_components/label.ts
@@ -1,4 +1,4 @@
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 
 export class Label {
   private labelElement: HTMLLabelElement;
@@ -12,7 +12,7 @@ export class Label {
     }
 
     if (tooltip) {
-      TooltipManager.getInstance().attachTooltip(this.labelElement, tooltip); // Attach tooltip
+      attachTooltip(this.labelElement, tooltip); // Attach tooltip
     }
   }
 
diff --git a/src/graphics/basic_components/parameter_editor.ts b/src/graphics/basic_components/parameter_editor.ts
@@ -1,7 +1,7 @@
 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";
+import { attachTooltip } from "../renderables/tooltip_manager";
 
 export interface EditableParameter {
   label: string;
@@ -35,7 +35,7 @@ export class ParameterEditor {
     const labelElement = document.createElement("label");
     labelElement.textContent = label;
     labelElement.className = CSS_CLASSES.PARAMETER_EDITOR_LABEL;
-    TooltipManager.getInstance().attachTooltip(labelElement, label);
+    attachTooltip(labelElement, label);
 
     // Create the input
     const input = document.createElement("input");
diff --git a/src/graphics/basic_components/slider.ts b/src/graphics/basic_components/slider.ts
@@ -1,5 +1,5 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 
 export interface SliderProps {
   label: string; // Label displayed above the slider
@@ -22,7 +22,7 @@ export class Slider {
     const label = document.createElement("div");
     label.textContent = props.label;
     label.classList.add(CSS_CLASSES.SLIDER_LABEL);
-    TooltipManager.getInstance().attachTooltip(label, props.label);
+    attachTooltip(label, props.label);
 
     this.valueDisplay = document.createElement("div");
     this.valueDisplay.textContent = `${props.initialValue}x`;
diff --git a/src/graphics/basic_components/table.ts b/src/graphics/basic_components/table.ts
@@ -1,5 +1,5 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 import { Button } from "./button";
 
 export interface TableOptions {
@@ -49,7 +49,7 @@ export class Table {
       }
 
       // Assign the tooltip
-      TooltipManager.getInstance().attachTooltip(th, tooltip);
+      attachTooltip(th, tooltip);
 
       headerRow.appendChild(th);
     });
diff --git a/src/graphics/basic_components/text_info.ts b/src/graphics/basic_components/text_info.ts
@@ -1,5 +1,5 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 
 export interface InfoField {
   key: string;
@@ -21,7 +21,7 @@ export class TextInfo {
       titleElement.textContent = this.title;
       titleElement.classList.add(CSS_CLASSES.INFO_TITLE);
       this.container.appendChild(titleElement);
-      TooltipManager.getInstance().attachTooltip(titleElement, this.title); // Attach tooltip to the title
+      attachTooltip(titleElement, this.title); // Attach tooltip to the title
     }
 
     this.list = document.createElement("ul");
@@ -81,7 +81,7 @@ export class TextInfo {
     keyElement.style.display = CSS_CLASSES.BLOCK;
     keyElement.style.textAlign = "center";
     if (tooltip) {
-      TooltipManager.getInstance().attachTooltip(keyElement, tooltip);
+      attachTooltip(keyElement, tooltip);
     }
 
     // Create a container to wrap the JSON content
@@ -120,7 +120,7 @@ export class TextInfo {
     keyElement.textContent = `${key}`;
     keyElement.classList.add(CSS_CLASSES.DETAIL_KEY);
     if (tooltip) {
-      TooltipManager.getInstance().attachTooltip(keyElement, tooltip);
+      attachTooltip(keyElement, tooltip);
     }
 
     const valueElement = document.createElement("span");
diff --git a/src/graphics/basic_components/toggle_button.ts b/src/graphics/basic_components/toggle_button.ts
@@ -1,4 +1,4 @@
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 
 export interface ToggleButtonProps {
   text: string; // Default button text (used if textOn/textOff are not provided)
@@ -29,7 +29,7 @@ export class ToggleButton {
     }
 
     if (tooltip) {
-      TooltipManager.getInstance().attachTooltip(this.button, tooltip);
+      attachTooltip(this.button, tooltip);
     }
 
     this.button.onclick = () => {
diff --git a/src/graphics/components/labeled_progress_bar.ts b/src/graphics/components/labeled_progress_bar.ts
@@ -1,6 +1,6 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
 import { ProgressBar } from "../basic_components/progress_bar";
-import { TooltipManager } from "../renderables/tooltip_manager";
+import { attachTooltip } from "../renderables/tooltip_manager";
 
 export class LabeledProgressBar {
   private container: HTMLElement;
@@ -21,7 +21,7 @@ export class LabeledProgressBar {
     this.labelElement = document.createElement("div");
     this.labelElement.className = CSS_CLASSES.CENTRAL_LABEL;
     this.labelElement.textContent = label;
-    TooltipManager.getInstance().attachTooltip(this.labelElement, label);
+    attachTooltip(this.labelElement, label);
 
     // Create the progress bar
     this.progressBar = new ProgressBar({ current, max });
diff --git a/src/graphics/left_bar.ts b/src/graphics/left_bar.ts
@@ -3,7 +3,7 @@ import ComputerSvg from "../assets/pc.svg";
 import SwitchSvg from "../assets/switch.svg";
 import { addDevice } from "../types/viewportManager";
 import { GlobalContext } from "../context";
-import { TooltipManager } from "./renderables/tooltip_manager";
+import { attachTooltip } from "./renderables/tooltip_manager";
 import { DeviceType } from "../types/view-devices/vDevice";
 import { Layer, layerFromName } from "../types/layer";
 
@@ -26,7 +26,7 @@ export class LeftBar {
     button.setAttribute("title", label); // Shows Text
 
     button.onclick = onClick;
-    TooltipManager.getInstance().attachTooltip(button, label);
+    attachTooltip(button, label);
     this.leftBar.appendChild(button);
 
     const img = document.createElement("img");
diff --git a/src/graphics/renderables/program_runner_info.ts b/src/graphics/renderables/program_runner_info.ts
@@ -8,7 +8,7 @@ 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";
+import { attachTooltip } from "./tooltip_manager";
 
 export class ProgramRunnerInfo implements Renderable {
   private runner: ProgramRunner;
@@ -26,10 +26,7 @@ export class ProgramRunnerInfo implements Renderable {
     const labelElement = document.createElement("div");
     labelElement.className = CSS_CLASSES.CENTRAL_LABEL;
     labelElement.textContent = TOOLTIP_KEYS.PROGRAM_RUNNER;
-    TooltipManager.getInstance().attachTooltip(
-      labelElement,
-      TOOLTIP_KEYS.PROGRAM_RUNNER,
-    );
+    attachTooltip(labelElement, TOOLTIP_KEYS.PROGRAM_RUNNER);
     this.inputFields.push(labelElement);
   }
   private addPrograms(programs: ProgramInfo[]) {
diff --git a/src/graphics/renderables/tooltip_manager.ts b/src/graphics/renderables/tooltip_manager.ts
diff --git a/src/handlers/pauseHandler.ts b/src/handlers/pauseHandler.ts
diff --git a/src/handlers/undoRedoHandler.ts b/src/handlers/undoRedoHandler.ts
diff --git a/src/index.ts b/src/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { TooltipManager } from "../renderables/tooltip_manager";`
	`1`	`+import { attachTooltip } from "../renderables/tooltip_manager";`
`2`	`2`
`3`	`3`	`export interface ButtonProps {`
`4`	`4`	`text: string; // Button text`
`@@ -24,7 +24,7 @@ export class Button {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`if (tooltip) {`
`27`		`- TooltipManager.getInstance().attachTooltip(this.button, tooltip);`
	`27`	`+ attachTooltip(this.button, tooltip);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`this.button.onclick = onClick; // Assign the click handler`