[Feature] Integrate DOI Links, Handle Cycles in Pathway Viz (#407)

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

templates/components/widgets/doi_link_widget.html

@@ -0,0 +1,69 @@
+{# DOI link widget - pure HTML template #}
+<div class="form-control">
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-baseline">
+    <!-- Label -->
+    <label class="label sm:w-48 sm:shrink-0">
+      <span
+        class="label-text"
+        :class="{
+              'text-error': $store.validationErrors.hasError(fieldName, context),
+              'text-sm text-base-content/60': isViewMode
+            }"
+        x-text="label"
+      ></span>
+    </label>
+
+    <!-- Input column -->
+    <div class="flex-1">
+      <!-- Help text -->
+      <template x-if="helpText">
+        <div class="label">
+          <span
+            class="label-text-alt text-base-content/60"
+            x-text="helpText"
+          ></span>
+        </div>
+      </template>
+
+      <!-- View mode: display as link -->
+      <template x-if="isViewMode">
+        <div class="mt-1">
+          <template x-if="value && doiUrl">
+            <a
+              :href="doiUrl"
+              class="link link-primary"
+              target="_blank"
+              x-text="value"
+            ></a>
+          </template>
+          <template x-if="!value">
+            <span class="text-base-content/50">—</span>
+          </template>
+        </div>
+      </template>
+
+      <!-- Edit mode -->
+      <template x-if="isEditMode">
+        <input
+          type="text"
+          class="input input-bordered w-full"
+          :class="{ 'input-error': $store.validationErrors.hasError(fieldName, context) }"
+          placeholder="DOI e.g. 10.1016/j.jhazmat.2016.08.036"
+          x-model="value"
+        />
+      </template>
+
+      <!-- Errors -->
+      <template x-if="$store.validationErrors.hasError(fieldName, context)">
+        <div class="label">
+          <template
+            x-for="errMsg in $store.validationErrors.getErrors(fieldName, context)"
+            :key="errMsg"
+          >
+            <span class="label-text-alt text-error" x-text="errMsg"></span>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</div>