fix(ui): render relationship-type custom fields

* Displays relationship list custom fields on the record landing page
  and adds a UI widget for the deposit form.
* Addresses #874.

Author: slint

assets/templates/custom_fields/RelationshipList.js

@@ -0,0 +1,146 @@
+// This file is part of Zenodo.
+// Copyright (C) 2025 CERN.
+//
+// Zenodo is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Button, Form, Icon, Dropdown } from "semantic-ui-react";
+import {
+  ArrayField,
+  GroupField,
+  showHideOverridableWithDynamicId,
+} from "react-invenio-forms";
+
+const emptyRelationship = { subject: [], object: [] };
+
+/**
+ * A multi-value tag input using Semantic UI Dropdown.
+ */
+class TagInput extends Component {
+  handleChange = (e, { value }) => {
+    this.props.onChange(value);
+  };
+
+  render() {
+    const { value, placeholder } = this.props;
+    const options = (value || []).map((v) => ({ key: v, text: v, value: v }));
+
+    return (
+      <Dropdown
+        fluid
+        multiple
+        search
+        selection
+        allowAdditions
+        additionLabel="Add "
+        placeholder={placeholder}
+        value={value || []}
+        options={options}
+        onChange={this.handleChange}
+        noResultsMessage="Type to add..."
+      />
+    );
+  }
+}
+
+TagInput.propTypes = {
+  value: PropTypes.array,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+TagInput.defaultProps = {
+  value: [],
+  placeholder: "",
+};
+
+/**
+ * Main component for editing a list of biotic relationships.
+ * Used for the obo:RO_0002453 (Host of) custom field.
+ */
+class RelationshipListComponent extends Component {
+  render() {
+    const { fieldPath, label, labelIcon, helpText } = this.props;
+
+    return (
+      <>
+        {label && (
+          <label className="field-label-class invenio-field-label" htmlFor={fieldPath}>
+            <strong>{label}</strong>
+          </label>
+        )}
+
+        <ArrayField
+          addButtonLabel="Add relationship"
+          defaultNewValue={emptyRelationship}
+          fieldPath={fieldPath}
+          helpText={helpText}
+        >
+          {({ arrayHelpers, indexPath, array }) => {
+            const relationship = array[indexPath] || emptyRelationship;
+
+            const handleSubjectChange = (newValue) => {
+              arrayHelpers.replace(indexPath, { ...relationship, subject: newValue });
+            };
+
+            const handleObjectChange = (newValue) => {
+              arrayHelpers.replace(indexPath, { ...relationship, object: newValue });
+            };
+
+            return (
+              <GroupField>
+                <Form.Field width={7}>
+                  <strong style={{ display: "block", marginBottom: "0.5em" }}>Subject</strong>
+                  <TagInput
+                    value={relationship.subject}
+                    placeholder="e.g. host species"
+                    onChange={handleSubjectChange}
+                  />
+                </Form.Field>
+
+                <Form.Field width={1} style={{ display: "flex", alignItems: "flex-end", justifyContent: "center", paddingBottom: "0.85em" }}>
+                  <Icon name="arrow right" />
+                </Form.Field>
+
+                <Form.Field width={7}>
+                  <strong style={{ display: "block", marginBottom: "0.5em" }}>Object</strong>
+                  <TagInput
+                    value={relationship.object}
+                    placeholder="e.g. pathogen"
+                    onChange={handleObjectChange}
+                  />
+                </Form.Field>
+
+                <Form.Field width={1} style={{ display: "flex", alignItems: "flex-end", paddingBottom: "0.6em" }}>
+                  <Button
+                    aria-label="Remove field"
+                    className="close-btn"
+                    icon="close"
+                    onClick={() => arrayHelpers.remove(indexPath)}
+                  />
+                </Form.Field>
+              </GroupField>
+            );
+          }}
+        </ArrayField>
+      </>
+    );
+  }
+}
+
+RelationshipListComponent.propTypes = {
+  fieldPath: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  labelIcon: PropTypes.string,
+  helpText: PropTypes.string,
+};
+
+RelationshipListComponent.defaultProps = {
+  label: undefined,
+  labelIcon: undefined,
+  helpText: undefined,
+};
+
+export const RelationshipList = showHideOverridableWithDynamicId(RelationshipListComponent);

site/zenodo_rdm/custom_fields/domain_fields.py

@@ -844,16 +844,23 @@ def field(self):
                 ),
             ),
         ),
-        # TODO - needs dedicated UI widget
         # obo
-        # dict(
-        #     field="obo:RO_0002453",
-        #     template="zenodo_rdm/obo.html",
-        #     ui_widget="MultiInput",
-        #     props=dict(
-        #         label="Host of",
-        #     ),
-        # ),
+        dict(
+            field="obo:RO_0002453",
+            ui_widget="RelationshipList",
+            template="zenodo_rdm/relationship_list.html",
+            props=dict(
+                label=_("Host of"),
+                subject=dict(
+                    label=_("Subject"),
+                    placeholder=_("e.g., host species name"),
+                ),
+                object=dict(
+                    label=_("Object"),
+                    placeholder=_("e.g., pathogen name"),
+                ),
+            ),
+        ),
     ],
 }
 

site/zenodo_rdm/templates/semantic-ui/zenodo_rdm/obo.html

@@ -0,0 +1,16 @@
+{#
+  Copyright (C) 2023-2025 CERN.
+
+  ZenodoRDM is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{# Template for rendering obo:RO_0002453 (Host of) custom field #}
+<dt class="ui tiny header">{{ _("Host of") }}</dt>
+<dd>
+  {% for value in field_value %}
+    <div>
+      ({{ value["subject"] | join(", ") }}) → ({{ value["object"] | join(", ") }})
+    </div>
+  {% endfor %}
+</dd>