Update exact synonym on frontend

EBISPOT · Nov 11, 2024 · 893de15 · 893de15
1 parent 3783d98
commit 893de15
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 23 deletions.
diff --git a/frontend/src/model/Entity.ts b/frontend/src/model/Entity.ts
@@ -68,6 +68,14 @@ export default abstract class Entity extends Thing {
     return Reified.fromJson<any>(this.properties["synonym"]);
   }
 
+  getExactSynonyms(): Reified<any>[] {
+    return Reified.fromJson<any>(this.extractExactMatchSynonyms()) || [];
+  }
+
+  getCloseMatchSynonyms(): Reified<any>[] {
+    return Reified.fromJson<any>(this.extractCloseMatchSynonyms()) || [];
+  }
+
   getAppearsIn(): string[] {
     return (this.properties["appearsIn"] || []) as string[];
   }
@@ -189,4 +197,40 @@ export default abstract class Entity extends Thing {
       }
     }
   }
+
+
+  extractExactMatchSynonyms(): string[] {
+    let result = []
+
+    if(this.properties["synonymProperty"]) {
+      let synonymProperties = this.properties["synonymProperty"];
+      if (!Array.isArray(synonymProperties)) {
+        synonymProperties = [synonymProperties];
+      }
+      synonymProperties.map((synonymProperty: string) => {
+        if (synonymProperty === "http://www.geneontology.org/formats/oboInOwl#hasExactSynonym" ||
+            synonymProperty === "http://www.geneontology.org/formats/oboInOwl#hasSynonym") {
+          result = result.concat(this.properties[synonymProperty]) || [];
+        }
+      })
+    }
+    return result || [];
+  }
+
+  extractCloseMatchSynonyms(): string[] {
+    let result = []
+    if(this.properties["synonymProperty"]) {
+      let synonymProperties = this.properties["synonymProperty"];
+      if (!Array.isArray(synonymProperties)) {
+        synonymProperties = [synonymProperties];
+      }
+      synonymProperties.map((synonymProperty: string) => {
+        if (synonymProperty !== "http://www.geneontology.org/formats/oboInOwl#hasExactSynonym" &&
+            synonymProperty !== "http://www.geneontology.org/formats/oboInOwl#hasSynonym") {
+          result = result.concat(this.properties[synonymProperty]) || [];
+        }
+      })
+    }
+    return result || [];
+  }
 }
diff --git a/frontend/src/pages/ontologies/entities/entityPageSections/EntitySynonymsSection.tsx b/frontend/src/pages/ontologies/entities/entityPageSections/EntitySynonymsSection.tsx
@@ -12,34 +12,65 @@ export default function EntitySynonymsSection({
   entity: Entity;
   linkedEntities: LinkedEntities;
 }) {
-  let synonyms = entity.getSynonyms();
+  let exactSynonyms = entity.getExactSynonyms();
 
-  if (!synonyms || synonyms.length === 0) {
+  let closeMatchSynonyms = entity.getCloseMatchSynonyms();
+
+  if ((!exactSynonyms || exactSynonyms.length === 0) && (!closeMatchSynonyms || closeMatchSynonyms.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 className="flex flex-col mb-2">
+        {exactSynonyms && exactSynonyms.length > 0 && (
+            <div className="flex flex-row flex-wrap items-center mb-2">
+              <div className="font-bold mr-2">Exact Synonyms</div>
+              {exactSynonyms
+                  .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>
+        )}
+
+        {closeMatchSynonyms && closeMatchSynonyms.length > 0 && (
+            <div className="flex flex-row flex-wrap items-center mb-2">
+              <div className="font-bold mr-2">CloseMatch Synonyms</div>
+              {closeMatchSynonyms
+                  .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>
-          );
-        })
-        .sort((a, b) => sortByKeys(a, b))}
-    </div>
+        )}
+      </div>
   );
 }