From e6eef6acb97e83529ce19659d6977f8096f5cf58 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 13 Dec 2024 14:15:34 -0800
Subject: [PATCH 1/4] Define columns for orthology section separately from the
 generic method

---
 backend/src/monarch_py/solr_cli.py            | 10 +--
 frontend/src/pages/node/AssociationsTable.vue | 82 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/backend/src/monarch_py/solr_cli.py b/backend/src/monarch_py/solr_cli.py
index 73f6d6ae..0d27a415 100644
--- a/backend/src/monarch_py/solr_cli.py
+++ b/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,
 ):
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 41566000..f2c2bf3b 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/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, index) in row.has_evidence_links"
+        :key="index"
+        :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,50 @@ const search = ref("");
 
 type Datum = keyof DirectionalAssociation;
 
+/** Orholog columns */
+
+const orthologColoumns = computed<Cols<Datum>>(() => {
+  return [
+    {
+      slot: "taxon",
+      key: "taxon" as Datum,
+      heading: "Taxon",
+      sortable: true,
+    },
+    {
+      slot: "ortholog",
+      key: "ortholog" as Datum,
+      heading: "Ortholog",
+      sortable: true,
+    },
+    {
+      slot: "has_evidence",
+      key: "has_evidence" as Datum,
+      heading: "Evidence",
+    },
+    {
+      slot: "primary_knowledge_source",
+      key: "primary_knowledge_source" as Datum,
+      heading: "Source",
+      sortable: true,
+    },
+    { slot: "divider" },
+    {
+      slot: "details",
+      key: "evidence_count",
+      heading: "Details",
+      align: "center",
+      sortable: true,
+    },
+  ];
+});
+
 /** 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 +295,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" &&

From 532040266a58ee4b62e7230ebdce15e547a95b91 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 13 Dec 2024 14:48:52 -0800
Subject: [PATCH 2/4] turn off sorting on ortholog column (it's a composite of
 two columns)

---
 frontend/src/pages/node/AssociationsTable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index f2c2bf3b..ed32a1c6 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -228,7 +228,6 @@ const orthologColoumns = computed<Cols<Datum>>(() => {
       slot: "ortholog",
       key: "ortholog" as Datum,
       heading: "Ortholog",
-      sortable: true,
     },
     {
       slot: "has_evidence",

From 3e50071f3f94cf4590e424fac84e687cb94ca71b Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 13 Dec 2024 15:01:16 -0800
Subject: [PATCH 3/4] for now, remove all of the sorting for orthologs. The
 ones that work aren't useful.

---
 frontend/src/pages/node/AssociationsTable.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index ed32a1c6..d1580f44 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -222,7 +222,6 @@ const orthologColoumns = computed<Cols<Datum>>(() => {
       slot: "taxon",
       key: "taxon" as Datum,
       heading: "Taxon",
-      sortable: true,
     },
     {
       slot: "ortholog",
@@ -238,7 +237,6 @@ const orthologColoumns = computed<Cols<Datum>>(() => {
       slot: "primary_knowledge_source",
       key: "primary_knowledge_source" as Datum,
       heading: "Source",
-      sortable: true,
     },
     { slot: "divider" },
     {
@@ -246,7 +244,6 @@ const orthologColoumns = computed<Cols<Datum>>(() => {
       key: "evidence_count",
       heading: "Details",
       align: "center",
-      sortable: true,
     },
   ];
 });

From 7ac9401111dbb54d7547fac0a923b4d4069bb91c Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 13 Dec 2024 15:05:41 -0800
Subject: [PATCH 4/4] remove 30% 5% 30% width formatting of first three columns
 from AppTable

---
 frontend/src/components/AppTable.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index c5b5c8af..56625530 100644
--- a/frontend/src/components/AppTable.vue
+++ b/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;