Merge pull request #796 from EBISPOT/fix-exact-synonym-issue

Update exact synonym display on frontend

Author: haideriqbal

frontend/src/model/Entity.ts

@@ -68,6 +68,26 @@ export default abstract class Entity extends Thing {
     return Reified.fromJson<any>(this.properties["synonym"]);
   }
 
+  getExactSynonyms(): Reified<any>[] {
+    const exactSynonymTypes = [
+      "http://www.geneontology.org/formats/oboInOwl#hasExactSynonym",
+      "http://www.geneontology.org/formats/oboInOwl#hasSynonym",
+    ];
+    return Reified.fromJson<any>(this.extractSynonyms(exactSynonymTypes)) || [];
+  }
+
+  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[] {
     return (this.properties["appearsIn"] || []) as string[];
   }
@@ -189,4 +209,33 @@ export default abstract class Entity extends Thing {
       }
     }
   }
+
+  extractSynonyms(synonymTypes: string | string[]): string[] {
+    const result : string[] = [];
+    // Check if 'synonymProperty' exists in 'this.properties'
+    if (!this.properties || !this.properties.hasOwnProperty("synonymProperty")) {
+      return result; // Return empty array if 'synonymProperty' doesn't exist
+    }
+    const synonymProperties = this.properties["synonymProperty"];
+    const synonymPropsArray = Array.isArray(synonymProperties)
+        ? synonymProperties
+        : [synonymProperties];
+
+    const synonymTypesArray = Array.isArray(synonymTypes)
+        ? synonymTypes
+        : [synonymTypes];
+
+    synonymPropsArray.forEach((synonymProperty: string) => {
+      if (synonymTypesArray.includes(synonymProperty)) {
+        if (this.properties.hasOwnProperty(synonymProperty)) {
+          const synonyms = this.properties[synonymProperty];
+          if (synonyms) {
+            result.push(...(Array.isArray(synonyms) ? synonyms : [synonyms]));
+          }
+        }
+      }
+    });
+
+    return result;
+  }
 }

frontend/src/pages/ontologies/entities/entityPageSections/EntitySynonymsSection.tsx

@@ -12,34 +12,52 @@ export default function EntitySynonymsSection({
   entity: Entity;
   linkedEntities: LinkedEntities;
 }) {
-  let synonyms = entity.getSynonyms();
+    const synonymsData = [
+        {label: "Exact Synonyms", synonyms: entity.getExactSynonyms()},
+        {label: "Related Synonyms", synonyms: entity.getRelatedSynonyms()},
+        {label: "Narrow Synonyms", synonyms: entity.getNarrowSynonyms()},
+        {label: "Broad Synonyms", synonyms: entity.getBroadSynonyms()},
+    ];
 
-  if (!synonyms || synonyms.length === 0) {
-    return <Fragment />;
-  }
+    if (synonymsData.every(({synonyms}) => !synonyms || synonyms.length === 0)) {
+        return <Fragment/>;
+    }
 
-  return (
-    <div className="flex flex-row flex-wrap items-center mb-2">
-      <div className="font-bold mr-2">Synonym</div>
-      {synonyms
-        .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>
-  );
+    return (
+        <div className="flex flex-col mb-2">
+            {synonymsData.map(
+                ({label, synonyms}) =>
+                    synonyms &&
+                    synonyms.length > 0 && (
+                        <div
+                            key={label}
+                            className="flex flex-row flex-wrap items-center mb-2"
+                        >
+                            <div className="font-bold mr-2">{label}</div>
+                            {synonyms
+                                .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>
+                    )
+            )}
+        </div>
+    );
 }