From 8b2443556f5079702683c0328651f6930fa6e5e9 Mon Sep 17 00:00:00 2001
From: Josh Lagrimas <joshlagrimas@ebi.ac.uk>
Date: Mon, 24 Jul 2023 16:18:25 +0100
Subject: [PATCH] issue-428: handle reified deprecation reason

---
 frontend/src/model/Entity.ts                  | 14 +++---
 .../pages/ontologies/entities/EntityPage.tsx  | 45 +++++++++++++------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/src/model/Entity.ts b/frontend/src/model/Entity.ts
index d318461f9..b716ec9fd 100644
--- a/frontend/src/model/Entity.ts
+++ b/frontend/src/model/Entity.ts
@@ -22,16 +22,14 @@ export default abstract class Entity extends Thing {
     return this.properties["http://www.ebi.ac.uk/efo/obsoleted_in_version"];
   }
 
-  getDeprecationReason(): string {
-    return asArray(
+  getDeprecationReason(): Reified<any>[] {
+    return Reified.fromJson<any>(
       this.properties["http://purl.obolibrary.org/obo/IAO_0000231"]
-    )
-      .concat(
-        asArray(
-          this.properties["http://www.ebi.ac.uk/efo/reason_for_obsolescence"]
-        )
+    ).concat(
+      Reified.fromJson<any>(
+        this.properties["http://www.ebi.ac.uk/efo/reason_for_obsolescence"]
       )
-      .join(", ");
+    );
   }
 
   getDeprecationReplacement(): string {
diff --git a/frontend/src/pages/ontologies/entities/EntityPage.tsx b/frontend/src/pages/ontologies/entities/EntityPage.tsx
index 865d22eb5..b6e3a738f 100644
--- a/frontend/src/pages/ontologies/entities/EntityPage.tsx
+++ b/frontend/src/pages/ontologies/entities/EntityPage.tsx
@@ -15,6 +15,7 @@ import LanguagePicker from "../../../components/LanguagePicker";
 import LoadingOverlay from "../../../components/LoadingOverlay";
 import SearchBox from "../../../components/SearchBox";
 import LinkedEntities from "../../../model/LinkedEntities";
+import Reified from "../../../model/Reified";
 import {
   getClassInstances,
   getEntityWithType,
@@ -36,6 +37,7 @@ import IndividualDifferentFromSection from "./entityPageSections/IndividualDiffe
 import IndividualPropertyAssertionsSection from "./entityPageSections/IndividualPropertyAssertionsSection";
 import IndividualSameAsSection from "./entityPageSections/IndividualSameAsSection";
 import IndividualTypesSection from "./entityPageSections/IndividualTypesSection";
+import MetadataTooltip from "./entityPageSections/MetadataTooltip";
 import PropertyChainSection from "./entityPageSections/PropertyChainSection";
 import PropertyCharacteristicsSection from "./entityPageSections/PropertyCharacteristicsSection";
 import PropertyInverseOfSection from "./entityPageSections/PropertyInverseOfSection";
@@ -246,20 +248,35 @@ export default function EntityPage({
                     </i>
                   </div>
                 )}
-                {entity.getDeprecationReason() && (
-                  <div>
-                    Reason:&thinsp;
-                    <i>
-                      {addLinksToText(
-                        entity.getDeprecationReason(),
-                        linkedEntities,
-                        ontologyId,
-                        entity,
-                        entityType
-                      )}
-                    </i>
-                  </div>
-                )}
+                {entity.getDeprecationReason() &&
+                  entity.getDeprecationReason().length > 0 && (
+                    <div>
+                      Reason:&thinsp;
+                      <i>
+                        {entity
+                          .getDeprecationReason()
+                          .map((reason: Reified<any>) => {
+                            return (
+                              <span key={reason.value.toString()}>
+                                {addLinksToText(
+                                  reason.value,
+                                  linkedEntities,
+                                  ontologyId,
+                                  entity,
+                                  entityType
+                                )}
+                                {reason.hasMetadata() ? (
+                                  <MetadataTooltip
+                                    metadata={reason.getMetadata()}
+                                    linkedEntities={linkedEntities}
+                                  />
+                                ) : null}
+                              </span>
+                            );
+                          })}
+                      </i>
+                    </div>
+                  )}
               </Banner>
             )}
             <div className="bg-gradient-to-r to-white rounded-lg p-8 mb-4 text-neutral-black from-neutral-light">