Update orthology association table (#930)

A first try at largely keeping our existing association table
infrastructure but defining each section separately, doing the ortholog
table specifically.

Author: kevinschaper

backend/src/monarch_py/solr_cli.py

@@ -210,11 +210,7 @@ def multi_entity_associations(
     ] = None,
     counterpart_category: Annotated[
         Optional[List[str]],
-        typer.Option(
-            "--counterpart-category",
-            "-c",
-            help="A comma-separated list of counterpart categories"
-        ),
+        typer.Option("--counterpart-category", "-c", help="A comma-separated list of counterpart categories"),
     ] = None,
     limit: fields.LimitOption = 20,
     offset: fields.OffsetOption = 0,
@@ -306,9 +302,7 @@ def histopheno(
 
 @solr_app.command("association-counts")
 def association_counts(
-    entity_id: Annotated[
-        str, typer.Argument(help="The entity to get association counts for")
-    ],
+    entity_id: Annotated[str, typer.Argument(help="The entity to get association counts for")],
     fmt: fields.FormatOption = fields.OutputFormat.json,
     output: fields.OutputOption = None,
 ):

frontend/src/components/AppTable.vue

@@ -454,21 +454,6 @@ const ariaSort = computed(() => {
   text-transform: capitalize;
 }
 
-/* first th */
-.th:nth-child(1) {
-  width: 30%;
-}
-
-/* second th */
-.th:nth-child(2) {
-  width: 5%;
-}
-
-/* third th */
-.th:nth-child(3) {
-  width: 30%;
-}
-
 /** body cells */
 .td {
   border-bottom: solid 2px $light-gray;

frontend/src/pages/node/AssociationsTable.vue

@@ -24,6 +24,31 @@
     :total="associations.total"
     @download="download"
   >
+    <!-- ortholog -->
+    <template #ortholog="{ row }">
+      <AppNodeBadge
+        v-if="row.direction === AssociationDirectionEnum.outgoing"
+        :node="{
+          id: row.object,
+          name: row.object_label,
+          category: 'biolink:Gene',
+          info: row.object_taxon_label,
+        }"
+        :breadcrumbs="getBreadcrumbs(node, row, 'subject')"
+      />
+
+      <AppNodeBadge
+        v-if="row.direction === AssociationDirectionEnum.incoming"
+        :node="{
+          id: row.subject,
+          name: row.subject_label,
+          category: 'biolink:Gene',
+          info: row.subject_taxon_label,
+        }"
+        :breadcrumbs="getBreadcrumbs(node, row, 'object')"
+      />
+    </template>
+
     <!-- subject -->
     <template #subject="{ row }">
       <AppNodeBadge
@@ -65,6 +90,15 @@
       <span v-else class="empty">No info</span>
     </template>
 
+    <template #has_evidence="{ row }">
+      <AppLink
+        v-for="source in row.has_evidence_links"
+        :key="source.id"
+        :to="source.url || ''"
+        >{{ source.id }}</AppLink
+      >
+    </template>
+
     <!-- button to show details -->
     <template #details="{ row }">
       <AppButton text="Details" icon="info-circle" @click="openModal(row)" />
@@ -180,8 +214,46 @@ const search = ref("");
 
 type Datum = keyof DirectionalAssociation;
 
+/** Orholog columns */
+
+const orthologColoumns = computed<Cols<Datum>>(() => {
+  return [
+    {
+      slot: "taxon",
+      key: "taxon" as Datum,
+      heading: "Taxon",
+    },
+    {
+      slot: "ortholog",
+      key: "ortholog" as Datum,
+      heading: "Ortholog",
+    },
+    {
+      slot: "has_evidence",
+      key: "has_evidence" as Datum,
+      heading: "Evidence",
+    },
+    {
+      slot: "primary_knowledge_source",
+      key: "primary_knowledge_source" as Datum,
+      heading: "Source",
+    },
+    { slot: "divider" },
+    {
+      slot: "details",
+      key: "evidence_count",
+      heading: "Details",
+      align: "center",
+    },
+  ];
+});
+
 /** table columns */
 const cols = computed((): Cols<Datum> => {
+  if (props.category.id.includes("GeneToGeneHomology")) {
+    return orthologColoumns.value;
+  }
+
   /** standard columns, always present */
   const baseCols: Cols<Datum> = [
     {
@@ -219,14 +291,12 @@ const cols = computed((): Cols<Datum> => {
   let extraCols: Cols<Datum> = [];
 
   /** taxon column. exists for many categories, so just add if any row has taxon. */
-  if (
-    props.category.id.includes("GeneToGeneHomology") ||
-    props.category.id.includes("Interaction")
-  )
+  if (props.category.id.includes("Interaction")) {
     extraCols.push({
       slot: "taxon",
       heading: "Taxon",
     });
+  }
 
   if (
     props.node.in_taxon_label == "Homo sapiens" &&