[Feature] Ketcher V3 (#427)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#427

templates/predict_pathway.html

@@ -80,29 +80,36 @@
         </fieldset>
       </div>
 
-      <label class="floating-label" for="predict-smiles">
-        <input
-          type="text"
-          name="smiles"
-          placeholder="SMILES"
-          id="predict-smiles"
-          class="input input-md w-full"
-        />
-        <span>SMILES</span>
-      </label>
+      <div class="form-control mb-3">
+        <label class="floating-label" for="node-smiles">
+          <div class="join w-full">
+            <input
+              type="text"
+              class="input input-md join-item w-full"
+              name="smiles"
+              placeholder="SMILES"
+              id="predict-smiles"
+            />
+            <button
+              type="button"
+              id="render-predict-smiles"
+              class="btn join-item"
+            >
+              Render
+            </button>
+          </div>
+          <span class="label-text">SMILES</span>
+        </label>
+      </div>
+
+      <input type="hidden" name="molfile" id="predict-molfile" />
 
       <div class="divider text-base-content/50">OR</div>
 
       <div class="mb-8 w-full">
-        <label class="text-base-content/50 mb-4 text-xs font-medium"
-          >Draw Structure</label
-        >
-        <iframe
-          id="predict-ketcher"
-          src="{% static '/js/ketcher2/ketcher.html' %}"
-          width="100%"
-          height="510"
-        ></iframe>
+        {% with iframe_id="predict-ketcher" height="624" text_input_id="predict-smiles" %}
+          {% include "components/ketcher.html" %}
+        {% endwith %}
       </div>
 
       <label class="select mb-8 w-full" id="prediction-setting-label">
@@ -158,96 +165,49 @@
         document.getElementById("predict-submit-button").innerText = "Predict";
       }
     }
-    const radioButtons = document.querySelectorAll('input[name="predict"]');
-    radioButtons.forEach(radio => {
-      radio.addEventListener('change', radioChange);
-    });
-
-    // 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() {
-      document.getElementById("predict-smiles").value = this.ketcher.getSmiles();
-    }
 
     document.addEventListener("DOMContentLoaded", function () {
-      const predictKetcher = document.getElementById("predict-ketcher");
-      predictKetcher.addEventListener("load", function () {
-        const checkKetcherReady = () => {
-          const win = this.contentWindow;
-          if (win.ketcher && "editor" in win.ketcher) {
-            window.predictKetcher = win.ketcher;
-            win.ketcher.editor.event.change.handlers.push({
-              once: false,
-              priority: 0,
-              f: predictKetcherToTextInput,
-              ketcher: win.ketcher,
-            });
-          } else {
-            setTimeout(checkKetcherReady, 100);
-          }
-        };
 
-        checkKetcherReady();
+      const radioButtons = document.querySelectorAll('input[name="predict"]');
+      radioButtons.forEach(radio => {
+        radio.addEventListener('change', radioChange);
+      });
+
+      const renderButton = document.getElementById("render-predict-smiles");
+      renderButton.addEventListener("click", async function (e) {
+        let smiles = document.getElementById("predict-smiles").value.trim();
+        if (smiles) {
+          setKetcherMolecule(smiles, false);
+        }
       });
 
       const submitButton = document.getElementById("predict-submit-button");
-      submitButton.addEventListener("click", function (e) {
+      submitButton.addEventListener("click", async function (e) {
         e.preventDefault();
         const button = this;
         button.disabled = true;
 
+        let buildMode = false;
         // Set text depending on mode
         if (document.getElementById("predict-submit-button").innerText === "Build") {
           button.textContent = "Building...";
+          buildMode = true;
         } else {
           button.textContent = "Predicting...";
         }
 
-        // Get SMILES from either input or Ketcher
-        const smilesInput = document.getElementById("predict-smiles");
-        let smiles = smilesInput.value.trim();
+        // Obtain text-input-smiles, ketcher-smiles,
+        let smiles = document.getElementById("predict-smiles").value.trim();
 
-        // If SMILES input is empty, try to get from Ketcher
         if (!smiles) {
-          const ketcher = getKetcherInstance('predict-ketcher');
-          if (ketcher && ketcher.getSmiles) {
-            try {
-              smiles = ketcher.getSmiles().trim();
-              if (smiles) {
-                smilesInput.value = 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.disabled = false;
-              button.textContent = "Predict";
-              return;
-            }
-          }
+            smiles = getSmilesFromKetcher();
         }
 
         // Basic validation
         if (!smiles) {
           alert("Please enter a SMILES string or draw a structure.");
           button.disabled = false;
-          button.textContent = "Predict";
+          button.textContent = buildMode ? "Build" : "Predict";
           return;
         }