From 3d7c3ebe61e4b390fe521ed5dfcac4f62f6de362 Mon Sep 17 00:00:00 2001
From: haider <haideriqbal1@hotmail.com>
Date: Mon, 11 Nov 2024 13:22:35 +0000
Subject: [PATCH] Update synonym display on frontend

---
 frontend/src/model/Entity.ts                  | 17 +++--
 .../EntitySynonymsSection.tsx                 | 66 +++++++++++++++++--
 2 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/frontend/src/model/Entity.ts b/frontend/src/model/Entity.ts
index e647a651..02db00b4 100644
--- a/frontend/src/model/Entity.ts
+++ b/frontend/src/model/Entity.ts
@@ -72,8 +72,16 @@ export default abstract class Entity extends Thing {
     return Reified.fromJson<any>(this.extractExactMatchSynonyms()) || [];
   }
 
-  getCloseMatchSynonyms(): Reified<any>[] {
-    return Reified.fromJson<any>(this.extractCloseMatchSynonyms()) || [];
+  getRelatedSynonyms(): Reified<any>[] {
+    return Reified.fromJson<any>(this.extractSynonyms("http://www.geneontology.org/formats/oboInOwl#hasRelatedSynonym")) || [];
+  }
+
+  getBroadSynonyms(): Reified<any>[] {
+    return Reified.fromJson<any>(this.extractSynonyms("http://www.geneontology.org/formats/oboInOwl#hasBroadSynonym")) || [];
+  }
+
+  getNarrowSynonyms(): Reified<any>[] {
+    return Reified.fromJson<any>(this.extractSynonyms("http://www.geneontology.org/formats/oboInOwl#hasNarrowSynonym")) || [];
   }
 
   getAppearsIn(): string[] {
@@ -217,7 +225,7 @@ export default abstract class Entity extends Thing {
     return result || [];
   }
 
-  extractCloseMatchSynonyms(): string[] {
+  extractSynonyms(synonymType: string): string[] {
     let result = []
     if(this.properties["synonymProperty"]) {
       let synonymProperties = this.properties["synonymProperty"];
@@ -225,8 +233,7 @@ export default abstract class Entity extends Thing {
         synonymProperties = [synonymProperties];
       }
       synonymProperties.map((synonymProperty: string) => {
-        if (synonymProperty !== "http://www.geneontology.org/formats/oboInOwl#hasExactSynonym" &&
-            synonymProperty !== "http://www.geneontology.org/formats/oboInOwl#hasSynonym") {
+        if (synonymProperty === synonymType) {
           result = result.concat(this.properties[synonymProperty]) || [];
         }
       })
diff --git a/frontend/src/pages/ontologies/entities/entityPageSections/EntitySynonymsSection.tsx b/frontend/src/pages/ontologies/entities/entityPageSections/EntitySynonymsSection.tsx
index 80d3e0f3..9b1ca784 100644
--- a/frontend/src/pages/ontologies/entities/entityPageSections/EntitySynonymsSection.tsx
+++ b/frontend/src/pages/ontologies/entities/entityPageSections/EntitySynonymsSection.tsx
@@ -13,10 +13,14 @@ export default function EntitySynonymsSection({
   linkedEntities: LinkedEntities;
 }) {
   let exactSynonyms = entity.getExactSynonyms();
+  let relatedSynonyms = entity.getRelatedSynonyms();
+  let narrowSynonyms = entity.getNarrowSynonyms();
+  let broadSynonyms = entity.getBroadSynonyms();
 
-  let closeMatchSynonyms = entity.getCloseMatchSynonyms();
-
-  if ((!exactSynonyms || exactSynonyms.length === 0) && (!closeMatchSynonyms || closeMatchSynonyms.length === 0)) {
+  if ((!exactSynonyms || exactSynonyms.length === 0) &&
+      (!relatedSynonyms || relatedSynonyms.length === 0) &&
+      (!narrowSynonyms || narrowSynonyms.length === 0) &&
+      (!broadSynonyms || broadSynonyms.length === 0)) {
     return <Fragment />;
   }
 
@@ -47,10 +51,60 @@ export default function EntitySynonymsSection({
             </div>
         )}
 
-        {closeMatchSynonyms && closeMatchSynonyms.length > 0 && (
+        {relatedSynonyms && relatedSynonyms.length > 0 && (
+            <div className="flex flex-row flex-wrap items-center mb-2">
+              <div className="font-bold mr-2">Related Synonyms</div>
+              {relatedSynonyms
+                  .map((synonym: Reified<any>) => {
+                    const hasMetadata = synonym.hasMetadata();
+                    return (
+                        <div
+                            key={synonym.value.toString().toUpperCase() + randomString()}
+                            className="bg-grey-default rounded-sm font-mono py-1 px-3 mr-2 my-1 text-sm"
+                        >
+                          {synonym.value}
+                          {hasMetadata && (
+                              <MetadataTooltip
+                                  metadata={synonym.getMetadata()}
+                                  linkedEntities={linkedEntities}
+                              />
+                          )}
+                        </div>
+                    );
+                  })
+                  .sort((a, b) => sortByKeys(a, b))}
+            </div>
+        )}
+
+        {narrowSynonyms && narrowSynonyms.length > 0 && (
+            <div className="flex flex-row flex-wrap items-center mb-2">
+              <div className="font-bold mr-2">Narrow Synonyms</div>
+              {narrowSynonyms
+                  .map((synonym: Reified<any>) => {
+                    const hasMetadata = synonym.hasMetadata();
+                    return (
+                        <div
+                            key={synonym.value.toString().toUpperCase() + randomString()}
+                            className="bg-grey-default rounded-sm font-mono py-1 px-3 mr-2 my-1 text-sm"
+                        >
+                          {synonym.value}
+                          {hasMetadata && (
+                              <MetadataTooltip
+                                  metadata={synonym.getMetadata()}
+                                  linkedEntities={linkedEntities}
+                              />
+                          )}
+                        </div>
+                    );
+                  })
+                  .sort((a, b) => sortByKeys(a, b))}
+            </div>
+        )}
+
+        {broadSynonyms && broadSynonyms.length > 0 && (
             <div className="flex flex-row flex-wrap items-center mb-2">
-              <div className="font-bold mr-2">CloseMatch Synonyms</div>
-              {closeMatchSynonyms
+              <div className="font-bold mr-2">Broad Synonyms</div>
+              {broadSynonyms
                   .map((synonym: Reified<any>) => {
                     const hasMetadata = synonym.hasMetadata();
                     return (