From d584791ee89428c281875ee84562ce73cec3b290 Mon Sep 17 00:00:00 2001
From: Tobias O <tobias.olenyi@envipath.com>
Date: Thu, 13 Nov 2025 23:27:29 +1300
Subject: [PATCH] [Fix] Ketcher submission now recognized (#213)

This will hack the ketcher submission to work again (see #207).
The problem seems to be that the iframe loads slower than the script tag so the reference is not available on page load.

Registering from within the code to poll until ketcher is ready is a bit messy.
Tracked the introduced dept in #212.

Reviewed-on: https://git.envipath.com/enviPath/enviPy/pulls/213
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
---
 templates/index/index.html     | 62 ++++++++++++++++++++++++++++++----
 templates/predict_pathway.html | 38 ++++++++++++++++++---
 2 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/templates/index/index.html b/templates/index/index.html
index 7a1cf4fc..dec6ea8e 100644
--- a/templates/index/index.html
+++ b/templates/index/index.html
@@ -258,6 +258,31 @@
   <script language="javascript">
     var currentPackage = "{{ meta.current_package.url }}";
 
+    // Helper function to safely get Ketcher instance from iframe
+    function getKetcherInstance(iframeId) {
+      const ketcherFrame = document.getElementById(iframeId);
+      if (!ketcherFrame) {
+        console.error("Ketcher iframe not found:", iframeId);
+        return null;
+      }
+
+      try {
+        if (
+          "contentWindow" in ketcherFrame &&
+          ketcherFrame.contentWindow.ketcher
+        ) {
+          return ketcherFrame.contentWindow.ketcher;
+        }
+      } catch (err) {
+        console.error(
+          "Cannot access Ketcher iframe - possible CORS issue:",
+          err,
+        );
+      }
+
+      return null;
+    }
+
     // Discourse API integration is now handled by discourse-api.js
 
     // Function to render Discourse topics into cards
@@ -361,10 +386,16 @@
         }, 300);
 
         // Transfer SMILES from Ketcher to text input if available
-        if (window.indexKetcher && window.indexKetcher.getSmiles) {
-          const smiles = window.indexKetcher.getSmiles();
-          if (smiles && smiles.trim() !== "") {
-            $("#index-form-text-input").val(smiles);
+        const ketcher = getKetcherInstance("index-ketcher");
+        if (ketcher && ketcher.getSmiles) {
+          try {
+            const smiles = ketcher.getSmiles();
+            if (smiles && smiles.trim() !== "") {
+              $("#index-form-text-input").val(smiles);
+            }
+          } catch (err) {
+            console.error("Failed to sync Ketcher to text input:", err);
+            // Non-critical error, just log it
           }
         }
       }
@@ -433,13 +464,32 @@
         var textSmiles = "";
 
         // Check if we're in Ketcher mode and extract SMILES
-        if ($('input[type="checkbox"]').is(":checked") && window.indexKetcher) {
-          textSmiles = window.indexKetcher.getSmiles().trim();
+        if ($('input[type="checkbox"]').is(":checked")) {
+          // Use the robust getter function
+          const ketcher = getKetcherInstance("index-ketcher");
+          if (ketcher && ketcher.getSmiles) {
+            try {
+              textSmiles = ketcher.getSmiles().trim();
+            } catch (err) {
+              console.error("Failed to get SMILES from Ketcher:", err);
+              alert(
+                "Unable to extract structure from the drawing editor. Please try again or switch to SMILES input mode.",
+              );
+              return;
+            }
+          } else {
+            console.warn("Ketcher not available, possibly still loading");
+            alert(
+              "The drawing editor is still loading. Please wait a moment and try again.",
+            );
+            return;
+          }
         } else {
           textSmiles = $("#index-form-text-input").val().trim();
         }
 
         if (textSmiles === "") {
+          alert("Please enter a SMILES string or draw a structure.");
           return;
         }
 
diff --git a/templates/predict_pathway.html b/templates/predict_pathway.html
index 811e9474..4cc5a219 100644
--- a/templates/predict_pathway.html
+++ b/templates/predict_pathway.html
@@ -138,6 +138,25 @@
   </div>
   {# prettier-ignore-start #}
   <script>
+    // Helper function to safely get Ketcher instance from iframe
+    function getKetcherInstance(iframeId) {
+      const ketcherFrame = document.getElementById(iframeId);
+      if (!ketcherFrame) {
+        console.error("Ketcher iframe not found:", iframeId);
+        return null;
+      }
+
+      try {
+        if ('contentWindow' in ketcherFrame && ketcherFrame.contentWindow.ketcher) {
+          return ketcherFrame.contentWindow.ketcher;
+        }
+      } catch (err) {
+        console.error("Cannot access Ketcher iframe - possible CORS issue:", err);
+      }
+
+      return null;
+    }
+
     function predictKetcherToTextInput() {
       $("#predict-smiles").val(this.ketcher.getSmiles());
     }
@@ -172,10 +191,21 @@
         let smiles = $("#predict-smiles").val().trim();
 
         // If SMILES input is empty, try to get from Ketcher
-        if (!smiles && window.predictKetcher) {
-          smiles = window.predictKetcher.getSmiles().trim();
-          if (smiles) {
-            $("#predict-smiles").val(smiles);
+        if (!smiles) {
+          const ketcher = getKetcherInstance('predict-ketcher');
+          if (ketcher && ketcher.getSmiles) {
+            try {
+              smiles = ketcher.getSmiles().trim();
+              if (smiles) {
+                $("#predict-smiles").val(smiles);
+              }
+            } catch (err) {
+              console.error("Failed to get SMILES from Ketcher:", err);
+              alert("Unable to extract structure from the drawing editor. Please enter a SMILES string instead.");
+              button.prop("disabled", false);
+              button.text("Predict");
+              return;
+            }
           }
         }