fix connector widget special chars

ploomber · Sep 27, 2023 · 7c73653 · 7c73653
1 parent 567fb10
commit 7c73653
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/utils/helper-functions.ts b/src/utils/helper-functions.ts
@@ -0,0 +1,15 @@
+export const specialToASCII = (str: string): string => {
+    let res = '';
+    for(let i = 0; i < str.length; i++) {
+        if(+str[i] || str[i].toLowerCase() !== str[i].toUpperCase()){
+            res += str[i];
+            continue;
+        }
+        else if (str[i] === ' ') {
+            res += '_';
+            continue;
+        }
+        res += str[i].charCodeAt(0);
+    };
+    return res;
+ };
diff --git a/src/widgets/connector.ts b/src/widgets/connector.ts
@@ -6,6 +6,7 @@ import {
 
 import { MODULE_NAME, MODULE_VERSION } from '../version';
 
+import { specialToASCII } from '../utils/helper-functions';
 
 // Import the CSS
 import '../../style/connector.css';
@@ -155,7 +156,7 @@ export class ConnectorView extends DOMWidgetView {
         // Draw connection buttons
         connections.forEach((connection: Connection) => {
             const { name } = connection;
-            const name_without_spaces = name.replace(/ /g, "_");
+            const name_without_spaces = specialToASCII(name)
 
             const buttonContainer = document.createElement("DIV");
             buttonContainer.className = "connection-button-container";
@@ -339,7 +340,7 @@ export class ConnectorView extends DOMWidgetView {
         deleteConnectionMessage.querySelector(".actions").appendChild(deleteButton);
 
         // hide controllers
-        const deleteConnBtn = this.el.querySelector(`#deleteConnBtn_${connection["name"].replace(/ /g, "_")}`);
+        const deleteConnBtn = this.el.querySelector(`#deleteConnBtn_${specialToASCII(connection["name"])}`);
         const actionsContainer = <HTMLElement>deleteConnBtn.parentNode;
         actionsContainer.style.display = "none"
 
@@ -635,7 +636,7 @@ export class ConnectorView extends DOMWidgetView {
                 buttonEl.classList.add("secondary");
             });
 
-        const selectedButtonEl = (<HTMLButtonElement>this.el.querySelector(`#connBtn_${connectionName.replace(/ /g, "_")}`));
+        const selectedButtonEl = (<HTMLButtonElement>this.el.querySelector(`#connBtn_${specialToASCII(connectionName)}`));
         selectedButtonEl.innerText = "Connected";
         selectedButtonEl.classList.add("primary");
     }