fix: more defensive ketcher reference

FIx display on the login page

Reviewed-on: enviPath/enviPy#203
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>

templates/index/index.html

@@ -256,6 +256,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
@@ -359,10 +384,16 @@
         }, 300);
 
         // Transfer SMILES from Ketcher to text input if available
-        if (window.indexKetcher && window.indexKetcher.getSmiles) {
+        const ketcher = getKetcherInstance("index-ketcher");
-          const smiles = window.indexKetcher.getSmiles();
+        if (ketcher && ketcher.getSmiles) {
-          if (smiles && smiles.trim() !== "") {
+          try {
-            $("#index-form-text-input").val(smiles);
+            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
           }
         }
       }
@@ -431,13 +462,32 @@
         var textSmiles = "";
 
         // Check if we're in Ketcher mode and extract SMILES
-        if ($('input[type="checkbox"]').is(":checked") && window.indexKetcher) {
+        if ($('input[type="checkbox"]').is(":checked")) {
-          textSmiles = window.indexKetcher.getSmiles().trim();
+          // 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;
         }
 

templates/predict_pathway.html

@@ -137,6 +137,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());
     }
@@ -171,10 +190,21 @@
         let smiles = $("#predict-smiles").val().trim();
 
         // If SMILES input is empty, try to get from Ketcher
-        if (!smiles && window.predictKetcher) {
+        if (!smiles) {
-          smiles = window.predictKetcher.getSmiles().trim();
+          const ketcher = getKetcherInstance('predict-ketcher');
-          if (smiles) {
+          if (ketcher && ketcher.getSmiles) {
-            $("#predict-smiles").val(smiles);
+            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;
+            }
           }
         }
 

templates/static/login.html

@@ -3,12 +3,31 @@
 {% block title %}enviPath - Sign In{% endblock %}
 
 {% block extra_styles %}
-  /* Tab styling */ .tab-content { display: none; } .tab-content.active {
+  <style>
-  display: block; } input[type="radio"].tab-radio { display: none; } .tab-label
+    /* Tab styling */
-  { cursor: pointer; padding: 0.75rem 1.5rem; border-bottom: 2px solid
+    .tab-content {
-  transparent; transition: all 0.3s ease; } .tab-label:hover { background-color:
+      display: none;
-  rgba(0, 0, 0, 0.05); } input[type="radio"].tab-radio:checked + .tab-label {
+    }
-  border-bottom-color: #3b82f6; font-weight: 600; }
+    .tab-content.active {
+      display: block;
+    }
+    input[type="radio"].tab-radio {
+      display: none;
+    }
+    .tab-label {
+      cursor: pointer;
+      padding: 0.75rem 1.5rem;
+      border-bottom: 2px solid transparent;
+      transition: all 0.3s ease;
+    }
+    .tab-label:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    input[type="radio"].tab-radio:checked + .tab-label {
+      border-bottom-color: #3b82f6;
+      font-weight: 600;
+    }
+  </style>
 {% endblock %}
 
 {% block content %}

templates/static/login_base.html

@@ -18,6 +18,8 @@
       rel="stylesheet"
       type="text/css"
     />
+
+    {% block extra_styles %}{% endblock %}
   </head>
   <body class="bg-base-100">
     <div class="flex h-screen">