[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: enviPath/enviPy#213
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>

templates/collections/joblog.html

@@ -1,5 +1,6 @@
 {% extends "framework.html" %}
 {% load static %}
+{% load envipytags %}
 {% block content %}
   <div class="panel-group" id="reviewListAccordion">
     <div class="panel panel-default">

templates/framework.html

@@ -151,11 +151,6 @@
                   >Package</a
                 >
               </li>
-              <li>
-                <a href="{{ meta.server_url }}/search" id="searchLink"
-                  >Search</a
-                >
-              </li>
               <li>
                 <a href="{{ meta.server_url }}/model" id="modelLink"
                   >Modelling</a

templates/framework_modern.html

@@ -113,7 +113,7 @@
 
           {# License - inside paper if present #}
           {% if meta.url_contains_package and meta.current_package.license %}
-            <div class="collapse-arrow bg-base-200 collapse m-8">
+            <div class="collapse-arrow bg-base-200 collapse p-8">
               <input type="checkbox" checked />
               <div class="collapse-title text-xl font-medium">License</div>
               <div class="collapse-content">

templates/includes/navbar.html

@@ -27,7 +27,7 @@
           class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
         >
           <li>
-            <a href="{{ meta.server_url }}/Package" id="packageLink">Package</a>
+            <a href="{{ meta.server_url }}/package" id="packageLink">Package</a>
           </li>
           <li>
             <a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a>

templates/index/index.html

@@ -119,7 +119,9 @@
                       >Ibuprofen</a
                     >
                   </div>
-                  <a class="absolute top-0 left-[calc(100%-5.4rem)]" href="#"
+                  <a
+                    class="absolute top-0 left-[calc(100%-5.4rem)]"
+                    href="/predict"
                     >Advanced</a
                   >
                 </div>
@@ -256,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
@@ -359,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
           }
         }
       }
@@ -431,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;
         }
 

templates/predict_pathway.html

@@ -26,6 +26,7 @@
               placeholder="Name"
               id="name"
               class="input input-md w-full"
+              autofocus
             />
             <span>Name</span>
           </label>
@@ -137,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());
     }
@@ -171,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;
+            }
           }
         }
 

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 {
-  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>
+    /* Tab styling */
+    .tab-content {
+      display: none;
+    }
+    .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">