[Feature] Ketcher V3 (#427)

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

templates/components/ketcher.html

@@ -0,0 +1,106 @@
+{% load static %}
+<div>
+  <label class="text-base-content/50 mb-4 text-xs font-medium"
+    >Draw Structure</label
+  >
+  <iframe
+    id="{{ iframe_id }}"
+    src="{% static '/js/ketcher3/standalone/index.html' %}"
+    width="100%"
+    height="{{ height }}"
+    tabindex="-1"
+  ></iframe>
+</div>
+<script>
+  // Used to block write back to text field if "Render" was clicked
+  var propagate = true;
+
+  // Helper function to safely get Ketcher instance from iframe
+  function getKetcherInstance(iframeId = "{{ iframe_id }}") {
+    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;
+  }
+
+  async function ketcherToInputs(
+    ketcher,
+    smilesTargetId = "{{ text_input_id }}",
+    molfileTargetId = "{{ molfile_input_id }}",
+    iframeId = "{{ iframe_id }}",
+  ) {
+    if (!propagate) {
+      propagate = true;
+      return;
+    }
+
+    document.getElementById(smilesTargetId).value =
+      await getSmilesFromKetcher(iframeId);
+    if (molfileTargetId !== "") {
+      document.getElementById(molfileTargetId).value =
+        await getMolfileFromKetcher(iframeId);
+    }
+  }
+
+  async function getSmilesFromKetcher(iframeId = "{{ iframe_id }}") {
+    const ketcher = getKetcherInstance(iframeId);
+
+    if (ketcher && ketcher.getSmiles) {
+      return ketcher.getSmiles();
+    }
+  }
+
+  async function getMolfileFromKetcher(iframeId = "{{ iframe_id }}") {
+    const ketcher = getKetcherInstance(iframeId);
+
+    if (ketcher && ketcher.getMolfile) {
+      return ketcher.getMolfile();
+    }
+  }
+
+  function setKetcherMolecule(
+    smilesOrMolfile,
+    propagateChange = true,
+    iframeId = "{{ iframe_id }}",
+  ) {
+    const ketcher = getKetcherInstance(iframeId);
+    propagate = propagateChange || false;
+    ketcher.setMolecule(smilesOrMolfile);
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const predictKetcher = document.getElementById("{{ iframe_id }}");
+
+    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: ketcherToInputs,
+            ketcher: win.ketcher,
+          });
+        } else {
+          setTimeout(checkKetcherReady, 100);
+        }
+      };
+      checkKetcherReady();
+    });
+  });
+</script>

templates/index/index.html

@@ -28,11 +28,8 @@
           drawMode: false,
           smiles: '',
           loadExample(smilesStr, linkEl) {
-            if (this.drawMode && window.indexKetcher && window.indexKetcher.setMolecule) {
-              window.indexKetcher.setMolecule(smilesStr);
-            } else {
-              this.smiles = smilesStr;
-            }
+            this.smiles = smilesStr;
+            console.log(this.smiles, this.drawMode)
             const original = linkEl.textContent;
             linkEl.textContent = 'loaded!';
             setTimeout(() => linkEl.textContent = original, 1000);
@@ -41,23 +38,26 @@
             const ketcher = getKetcherInstance('index-ketcher');
             if (ketcher && ketcher.getSmiles) {
               try {
-                const s = ketcher.getSmiles();
-                if (s && s.trim()) this.smiles = s;
+                ketcher.getSmiles().then((smiles) => {
+                  if(smiles.trim()) {
+                    this.smiles = smiles.trim()
+                  }
+                });
               } catch (err) {
                 console.error('Failed to sync from Ketcher:', err);
               }
             }
           },
-          submitForm() {
+          async submitForm() {
             let finalSmiles = '';
             if (this.drawMode) {
               const ketcher = getKetcherInstance('index-ketcher');
               if (ketcher && ketcher.getSmiles) {
                 try {
-                  finalSmiles = ketcher.getSmiles().trim();
+                  finalSmiles = await getSmilesFromKetcher('index-ketcher')
                 } catch (err) {
                   console.error('Failed to get SMILES from Ketcher:', err);
-                  alert('Unable to extract structure. Please try again or switch to SMILES input.');
+                  alert('BBUnable to extract structure. Please try again or switch to SMILES input.');
                   return;
                 }
               } else {
@@ -198,13 +198,11 @@
                 x-transition:leave-end="opacity-0 scale-95"
                 class="w-full"
               >
-                <iframe
-                  id="index-ketcher"
-                  src="{% static '/js/ketcher2/ketcher.html' %}"
-                  width="100%"
-                  height="400"
-                  class="rounded-lg"
-                ></iframe>
+                <div class="mb-8 w-full">
+                  {% with iframe_id="index-ketcher" height="400" text_input_id="index-form-smiles" %}
+                    {% include "components/ketcher.html" %}
+                  {% endwith %}
+                </div>
                 <button
                   class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
                 >

templates/modals/collections/new_compound_modal.html

@@ -59,22 +59,33 @@
           <label class="label" for="compound-smiles">
             <span class="label-text">SMILES</span>
           </label>
-          <input
-            type="text"
-            class="input input-bordered w-full"
-            name="compound-smiles"
-            placeholder="SMILES"
-            id="compound-smiles"
-          />
+          <div class="join mx-auto w-full">
+            <input
+              type="text"
+              class="input input-bordered join-item w-full"
+              name="compound-smiles"
+              placeholder="SMILES"
+              id="compound-smiles"
+            />
+            <input
+              type="hidden"
+              name="compound-molfile"
+              id="compound-molfile"
+            />
+            <button
+              type="button"
+              id="render-compound-smiles"
+              class="btn join-item"
+            >
+              Render
+            </button>
+          </div>
         </div>
 
         <div class="mb-3">
-          <iframe
-            id="new_compound_ketcher"
-            src="{% static '/js/ketcher2/ketcher.html' %}"
-            width="100%"
-            height="510"
-          ></iframe>
+          {% with iframe_id="new_compound_ketcher" height="624" text_input_id="compound-smiles" molfile_input_id="compound-molfile" %}
+            {% include "components/ketcher.html" %}
+          {% endwith %}
         </div>
       </form>
     </div>
@@ -110,28 +121,15 @@
     <button :disabled="isSubmitting">close</button>
   </form>
 </dialog>
-
 <script>
-  document
-    .getElementById("new_compound_ketcher")
-    .addEventListener("load", function () {
-      const iframe = this;
-      const checkKetcherReady = () => {
-        const win = iframe.contentWindow;
-        if (win.ketcher && "editor" in win.ketcher) {
-          win.ketcher.editor.event.change.handlers.push({
-            once: false,
-            priority: 0,
-            f: function () {
-              document.getElementById("compound-smiles").value =
-                this.ketcher.getSmiles();
-            },
-            ketcher: win.ketcher,
-          });
-        } else {
-          setTimeout(checkKetcherReady, 100);
-        }
-      };
-      checkKetcherReady();
+  document.addEventListener("DOMContentLoaded", function () {
+    const renderButton = document.getElementById("render-compound-smiles");
+    renderButton.addEventListener("click", async function (e) {
+      let smiles = document.getElementById("compound-smiles").value.trim();
+
+      if (smiles) {
+        setKetcherMolecule(smiles, false);
+      }
     });
+  });
 </script>

templates/modals/collections/new_reaction_modal.html

@@ -55,16 +55,33 @@
           />
         </div>
 
-        <div class="mb-3">
-          <iframe
-            id="new_reaction_ketcher"
-            src="{% static '/js/ketcher2/ketcher.html' %}"
-            width="100%"
-            height="510"
-          ></iframe>
+        <div class="form-control mb-3">
+          <label class="label" for="reaction-smirks">
+            <span class="label-text">Reaction SMILES</span>
+          </label>
+          <div class="join mx-auto w-full">
+            <input
+              type="text"
+              class="input input-bordered join-item w-full"
+              name="reaction-smiles"
+              placeholder="Reaction SMILES"
+              id="reaction-smiles"
+            />
+            <button
+              type="button"
+              id="render-reaction-smiles"
+              class="btn join-item"
+            >
+              Render
+            </button>
+          </div>
         </div>
 
-        <input type="hidden" name="reaction-smirks" id="reaction-smirks" />
+        <div class="mb-3">
+          {% with iframe_id="new_reaction_ketcher" height="624" text_input_id="reaction-smiles" %}
+            {% include "components/ketcher.html" %}
+          {% endwith %}
+        </div>
       </form>
     </div>
 
@@ -81,11 +98,7 @@
       <button
         type="button"
         class="btn btn-primary"
-        @click="
-          const k = getKetcher('new_reaction_ketcher');
-          document.getElementById('reaction-smirks').value = k.getSmiles();
-          submit('new-reaction-modal-form');
-        "
+        @click="submit('new-reaction-modal-form');"
         :disabled="isSubmitting"
       >
         <span x-show="!isSubmitting">Submit</span>
@@ -103,3 +116,15 @@
     <button :disabled="isSubmitting">close</button>
   </form>
 </dialog>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const renderButton = document.getElementById("render-reaction-smiles");
+    renderButton.addEventListener("click", async function (e) {
+      let smiles = document.getElementById("reaction-smiles").value.trim();
+
+      if (smiles) {
+        setKetcherMolecule(smiles, false);
+      }
+    });
+  });
+</script>

templates/modals/objects/add_pathway_node_modal.html

@@ -59,22 +59,25 @@
           <label class="label" for="node-smiles">
             <span class="label-text">SMILES</span>
           </label>
-          <input
-            type="text"
-            class="input input-bordered w-full"
-            name="node-smiles"
-            placeholder="SMILES"
-            id="node-smiles"
-          />
+          <div class="join mx-auto w-full">
+            <input
+              type="text"
+              class="input input-bordered join-item w-full"
+              name="node-smiles"
+              placeholder="SMILES"
+              id="node-smiles"
+            />
+            <input type="hidden" name="node-molfile" id="node-molfile" />
+            <button type="button" id="render-node-smiles" class="btn join-item">
+              Render
+            </button>
+          </div>
         </div>
 
         <div class="mb-3">
-          <iframe
-            id="add_node_ketcher"
-            src="{% static '/js/ketcher2/ketcher.html' %}"
-            width="100%"
-            height="510"
-          ></iframe>
+          {% with iframe_id="add_node_ketcher" height="624" text_input_id="node-smiles" molfile_input_id="node-molfile" %}
+            {% include "components/ketcher.html" %}
+          {% endwith %}
         </div>
       </form>
     </div>
@@ -110,28 +113,15 @@
     <button :disabled="isSubmitting">close</button>
   </form>
 </dialog>
-
 <script>
-  document
-    .getElementById("add_node_ketcher")
-    .addEventListener("load", function () {
-      const iframe = this;
-      const checkKetcherReady = () => {
-        const win = iframe.contentWindow;
-        if (win.ketcher && "editor" in win.ketcher) {
-          win.ketcher.editor.event.change.handlers.push({
-            once: false,
-            priority: 0,
-            f: function () {
-              document.getElementById("node-smiles").value =
-                this.ketcher.getSmiles();
-            },
-            ketcher: win.ketcher,
-          });
-        } else {
-          setTimeout(checkKetcherReady, 100);
-        }
-      };
-      checkKetcherReady();
+  document.addEventListener("DOMContentLoaded", function () {
+    const renderButton = document.getElementById("render-node-smiles");
+    renderButton.addEventListener("click", async function (e) {
+      let smiles = document.getElementById("node-smiles").value.trim();
+
+      if (smiles) {
+        setKetcherMolecule(smiles, false);
+      }
     });
+  });
 </script>

templates/modals/objects/add_structure_modal.html

@@ -59,22 +59,33 @@
           <label class="label" for="structure-smiles">
             <span class="label-text">SMILES</span>
           </label>
-          <input
-            type="text"
-            class="input input-bordered w-full"
-            name="structure-smiles"
-            placeholder="SMILES"
-            id="structure-smiles"
-          />
+          <div class="join mx-auto w-full">
+            <input
+              type="text"
+              class="input input-bordered join-item w-full"
+              name="structure-smiles"
+              placeholder="SMILES"
+              id="structure-smiles"
+            />
+            <input
+              type="hidden"
+              name="structure-molfile"
+              id="structure-molfile"
+            />
+            <button
+              type="button"
+              id="render-structure-smiles"
+              class="btn join-item"
+            >
+              Render
+            </button>
+          </div>
         </div>
 
         <div class="mb-3">
-          <iframe
-            id="add_structure_ketcher"
-            src="{% static '/js/ketcher2/ketcher.html' %}"
-            width="100%"
-            height="510"
-          ></iframe>
+          {% with iframe_id="add_structure_ketcher" height="624" text_input_id="structure-smiles" molfile_input_id="structure-molfile" %}
+            {% include "components/ketcher.html" %}
+          {% endwith %}
         </div>
       </form>
     </div>
@@ -110,28 +121,15 @@
     <button :disabled="isSubmitting">close</button>
   </form>
 </dialog>
-
 <script>
-  document
-    .getElementById("add_structure_ketcher")
-    .addEventListener("load", function () {
-      const iframe = this;
-      const checkKetcherReady = () => {
-        const win = iframe.contentWindow;
-        if (win.ketcher && "editor" in win.ketcher) {
-          win.ketcher.editor.event.change.handlers.push({
-            once: false,
-            priority: 0,
-            f: function () {
-              document.getElementById("structure-smiles").value =
-                this.ketcher.getSmiles();
-            },
-            ketcher: win.ketcher,
-          });
-        } else {
-          setTimeout(checkKetcherReady, 100);
-        }
-      };
-      checkKetcherReady();
+  document.addEventListener("DOMContentLoaded", function () {
+    const renderButton = document.getElementById("render-structure-smiles");
+    renderButton.addEventListener("click", async function (e) {
+      let smiles = document.getElementById("structure-smiles").value.trim();
+
+      if (smiles) {
+        setKetcherMolecule(smiles, false);
+      }
     });
+  });
 </script>

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;
         }