[Feature] Sync Features from Client Repo (#425)

- New PackageImporter
- Fix persisting Molfile on Structure creation
- Add NonPersistent Prediction
- Pathway View Options
- Edit Node Fix

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

templates/objects/pathway.html

@@ -21,12 +21,13 @@
     .link {
       stroke: #999;
       stroke-opacity: 0.6;
-      /* marker-end: url(#arrow); */
+      stroke-width: 1.5px;
     }
 
     .link_no_arrow {
       stroke: #999;
       stroke-opacity: 0.6;
+      stroke-width: 1.5px;
     }
 
     .node image {
@@ -177,6 +178,52 @@
                   tabindex="0"
                   class="dropdown-content menu bg-base-100 rounded-box z-50 w-60 p-2"
                 >
+                  <li>
+                    <a id="compound-names-toggle-button" class="cursor-pointer">
+                      <svg
+                        id="compound-names-icon"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="lucide lucide-eye"
+                      >
+                        <path
+                          d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
+                        />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
+                      Compound Names
+                    </a>
+                  </li>
+                  <li>
+                    <a id="reaction-names-toggle-button" class="cursor-pointer">
+                      <svg
+                        id="reaction-names-icon"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="lucide lucide-eye"
+                      >
+                        <path
+                          d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
+                        />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
+                      Reaction Names
+                    </a>
+                  </li>
                   {% if pathway.setting.model.app_domain %}
                     <li>
                       <a id="app-domain-toggle-button" class="cursor-pointer">
@@ -495,6 +542,10 @@
   {{ pathway.d3_json|json_script:"pathway" }}
 
   <script>
+    // Global switch for compound names view
+    var compoundNamesViewEnabled = false;
+    // Gloabl switch for reaction names view
+    var reactionNamesViewEnabled = false;
     // Global switch for app domain view
     var appDomainViewEnabled = false;
     // Global switch for timeseries view
@@ -530,6 +581,58 @@
         descContent.innerHTML = newDesc;
       }
 
+      const compoundNamesBtn = document.getElementById(
+        "compound-names-toggle-button",
+      );
+      if (compoundNamesBtn) {
+        compoundNamesBtn.addEventListener("click", function () {
+          compoundNamesViewEnabled = !compoundNamesViewEnabled;
+          const icon = document.getElementById("compound-names-icon");
+          if (compoundNamesViewEnabled) {
+            // Change to eye-off icon
+            icon.innerHTML =
+              '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>';
+            nodes.forEach((x) => {
+              if (x.name) {
+                d3.select(x.el)
+                  .append("text")
+                  .text((d) => d.plain_name)
+                  .attr("text-anchor", "middle")
+                  .attr("y", -20)
+                  .style("font-size", "4px");
+              }
+            });
+          } else {
+            // Change back to eye icon
+            icon.innerHTML =
+              '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';
+            nodes.forEach((x) => {
+              d3.select(x.el).select("text").remove();
+            });
+          }
+        });
+      }
+      const reactionNamesBtn = document.getElementById(
+        "reaction-names-toggle-button",
+      );
+      if (reactionNamesBtn) {
+        reactionNamesBtn.addEventListener("click", function () {
+          reactionNamesViewEnabled = !reactionNamesViewEnabled;
+          const icon = document.getElementById("reaction-names-icon");
+          if (reactionNamesViewEnabled) {
+            // Change to eye-off icon
+            icon.innerHTML =
+              '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>';
+            d3.selectAll(".link-label").style("display", null);
+          } else {
+            // Change back to eye icon
+            icon.innerHTML =
+              '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';
+            d3.selectAll(".link-label").style("display", "none");
+          }
+        });
+      }
+
       // App domain toggle
       const appDomainBtn = document.getElementById("app-domain-toggle-button");
       if (appDomainBtn) {