Merge pull request #1880 from cvisionai/dev/fix-applet-init

Wait for custom element definition before using applet
cvisionai · Nov 21, 2024 · 2071b43 · 2071b43
2 parents 7cd55e4 + 6784a21
commit 2071b43
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/api/main/kube.py b/api/main/kube.py
@@ -320,7 +320,8 @@ def start_algorithm(
         # Add in workflow parameters.
         existing_params = manifest["spec"].get("arguments", {}).get("parameters", [])
         manifest["spec"]["arguments"] = {
-            "parameters": existing_params + [
+            "parameters": existing_params
+            + [
                 {
                     "name": "name",
                     "value": self.alg.name,

diff --git a/ui/src/js/annotation/tools-applet-panel.js b/ui/src/js/annotation/tools-applet-panel.js
@@ -93,37 +93,47 @@ export class ToolsAppletPanel extends TatorElement {
   initApplet() {
     // if (this._appletData == null) { return; }
 
-    this._appletElement =
+    const appletElement =
       this._appletView.contentWindow.document.getElementById("toolsApplet");
-    if (this._appletElement == null) {
+    if (appletElement == null) {
       return;
     }
-
-    this._appletElement.addEventListener(
-      "closeApplet",
-      this.togglePanel.bind(this)
-    );
-
-    // Listen for html registration, and page event with svg as detail
-    this._appletElement.addEventListener("icon-ready", (evt) => {
-      if (this._appletTrigger !== null && evt.detail.icon !== null) {
-        this._appletTrigger.setIcon(evt.detail.icon);
-      } else {
-        console.warn(
-          "Event icon ready heard, but not enough data to set icon."
+    const appletTagName = appletElement.tagName.toLowerCase();
+    this._appletView.contentWindow.customElements
+      .whenDefined(appletTagName)
+      .then(() => {
+        this._appletElement =
+          this._appletView.contentWindow.document.getElementById("toolsApplet");
+        if (this._appletElement == null) {
+          return;
+        }
+
+        this._appletElement.addEventListener(
+          "closeApplet",
+          this.togglePanel.bind(this)
         );
-      }
-    });
 
-    // RUN THIS LAST! listeners need to be in place above first
-    this._appletElement.init({
-      canvas: this._canvas,
-      canvasElement: this._canvasElement,
-      data: this._page._data,
-    });
-
-    //
-    this.dispatchEvent(new Event("appletReady"));
+        // Listen for html registration, and page event with svg as detail
+        this._appletElement.addEventListener("icon-ready", (evt) => {
+          if (this._appletTrigger !== null && evt.detail.icon !== null) {
+            this._appletTrigger.setIcon(evt.detail.icon);
+          } else {
+            console.warn(
+              "Event icon ready heard, but not enough data to set icon."
+            );
+          }
+        });
+
+        // RUN THIS LAST! listeners need to be in place above first
+        this._appletElement.init({
+          canvas: this._canvas,
+          canvasElement: this._canvasElement,
+          data: this._page._data,
+        });
+
+        //
+        this.dispatchEvent(new Event("appletReady"));
+      });
   }
 }