From 68c259223175861d29dd25f77b01af4ca26474ad Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Thu, 4 Sep 2025 15:48:43 -0400
Subject: [PATCH 01/18] clean up

---
 .../pages/node/SectionClinicalReources.vue    | 37 +++++-------
 frontend/src/pages/node/SectionOverview.vue   | 59 +++++--------------
 2 files changed, 28 insertions(+), 68 deletions(-)

diff --git a/frontend/src/pages/node/SectionClinicalReources.vue b/frontend/src/pages/node/SectionClinicalReources.vue
index d33f03bce..f2ae104c2 100644
--- a/frontend/src/pages/node/SectionClinicalReources.vue
+++ b/frontend/src/pages/node/SectionClinicalReources.vue
@@ -6,22 +6,20 @@
   >
     <div class="clinical-resources">
       <div class="custom-grid">
-        <div v-for="(res, id) in clinicalResources" :key="id" class="linkout">
-          <AppLink
-            :to="res.url || ''"
-            class="brand-chip"
-            :style="chipStyle(res)"
-            :aria-label="res.label || res.id"
-            v-tooltip="res.tooltip"
-          >
-            <span>
-              {{ brandText(res.id, res.label) }}
-            </span>
-            <small class="brand-id">{{ res.id }}</small>
-          </AppLink>
-
-          <!-- removed the bottom ID display -->
-        </div>
+        <AppLink
+          v-for="(res, id) in clinicalResources"
+          :key="id"
+          :to="res.url || ''"
+          class="brand-chip"
+          :style="chipStyle(res)"
+          :aria-label="res.label || res.id"
+          v-tooltip="res.tooltip"
+        >
+          <span>
+            {{ brandText(res.id, res.label) }}
+          </span>
+          <small class="brand-id">{{ res.id }}</small>
+        </AppLink>
       </div>
 
       <div class="sub-items">
@@ -117,13 +115,6 @@ const brandText = (id: string, fallback?: string) => {
   gap: 0.4em;
 }
 
-.linkout {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.35em;
-}
-
 .brand-chip {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index e44495674..266985d4f 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -47,13 +47,13 @@
       </AppDetail>
 
       <!--Temperory condition for diesease node-->
-      <AppDetails v-if="isDiseaseNode" gap="20px">
+      <AppDetails v-if="isDiseaseNode || isphenotypeNode" gap="20px">
         <SectionClinicalReources
           :frequency-label="frequencyLabel"
           :node="node"
         />
         <AppDetail
-          :blank="!otherMappings.length"
+          v-if="otherMappings.length"
           title="Equivalent disease concepts in other termiologies"
           :full="true"
         >
@@ -69,7 +69,7 @@
         </AppDetail>
         <!-- external references -->
         <AppDetail
-          :blank="!externalRefs?.length"
+          v-if="externalRefs?.length"
           title="External References"
           :full="true"
         >
@@ -83,13 +83,13 @@
           </AppFlex>
         </AppDetail>
 
-        <AppDetail :blank="!node.uri" title="URI">
+        <AppDetail v-if="node.uri" title="URI">
           <AppLink :to="node.uri || ''">
             {{ node.id }}
           </AppLink>
         </AppDetail>
 
-        <AppDetail :blank="!node.provided_by_link" title="Ingest Documentation">
+        <AppDetail v-if="node.provided_by_link" title="Ingest Documentation">
           <AppLink :to="node.provided_by_link?.url || ''">
             {{ node.provided_by_link?.id || node.provided_by }}
           </AppLink>
@@ -99,48 +99,14 @@
       <!--For all other nodes other than diesease nodes-->
       <AppDetails v-else gap="20px">
         <!-- URI -->
-        <AppDetail :blank="!node.uri" title="URI">
+        <AppDetail v-if="node.uri" title="URI">
           <AppLink :to="node.uri || ''">
             {{ node.id }}
           </AppLink>
         </AppDetail>
-        <!-- inheritance -->
-        <AppDetail
-          v-if="node.category === 'biolink:Disease'"
-          :blank="!node.inheritance"
-          title="Heritability"
-        >
-          <AppFlex align-h="left" gap="small">
-            <AppLink
-              v-tooltip="node.inheritance?.name"
-              :to="node.inheritance?.id || ''"
-              >{{ node.inheritance?.name }}</AppLink
-            >
-          </AppFlex>
-        </AppDetail>
-
-        <!-- disease causal genes -->
-        <AppDetail
-          v-if="node.category === 'biolink:Disease'"
-          :blank="!node.causal_gene?.length"
-          title="Causal Genes"
-        >
-          <AppFlex align-h="left">
-            <AppNodeBadge
-              v-for="(gene, index) in node.causal_gene"
-              :key="index"
-              :node="omit(gene, 'in_taxon_label')"
-            />
-          </AppFlex>
-        </AppDetail>
-
-        <!-- disease frequecy -->
-        <AppDetail v-if="node.category === 'biolink:Disease'" title="Frequency">
-          <span>{{ node?.subsets?.includes("rare") ? "Rare" : "Common" }}</span>
-        </AppDetail>
 
         <!-- mappings -->
-        <AppDetail :blank="!clinicalSynopsis.length" title="Clinical Synopsis">
+        <AppDetail v-if="clinicalSynopsis.length" title="Clinical Synopsis">
           <AppFlex align-h="left" gap="small">
             <AppLink
               v-for="(mapping, index) in clinicalSynopsis"
@@ -152,7 +118,7 @@
           </AppFlex>
         </AppDetail>
         <AppDetail
-          :blank="!infoForPatients.length"
+          v-if="infoForPatients.length"
           title="Clinical Info for Patients"
         >
           <AppFlex align-h="left" gap="small">
@@ -166,14 +132,14 @@
           </AppFlex>
         </AppDetail>
 
-        <AppDetail :blank="!node.provided_by_link" title="Ingest Documentation">
+        <AppDetail v-if="node.provided_by_link" title="Ingest Documentation">
           <AppLink :to="node.provided_by_link?.url || ''">
             {{ node.provided_by_link?.id || node.provided_by }}
           </AppLink>
         </AppDetail>
 
         <AppDetail
-          :blank="!otherMappings.length"
+          v-if="otherMappings.length"
           title="Other Mappings"
           :full="true"
         >
@@ -189,7 +155,7 @@
         </AppDetail>
         <!-- external references -->
         <AppDetail
-          :blank="!node.external_links?.length"
+          v-if="node.external_links?.length"
           title="External References"
           :full="true"
         >
@@ -223,6 +189,9 @@ type Props = { node: Node };
 
 const { node } = defineProps<Props>();
 const isDiseaseNode = computed(() => node.category === "biolink:Disease");
+const isphenotypeNode = computed(
+  () => node.category === "biolink:PhenotypicFeature",
+);
 /** separate out mappings into categories */
 const clinicalSynopsis = computed(
   () =>

From 4f1bc07f24827c384e5c3a4d997c6d5c8df41b6c Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Fri, 5 Sep 2025 14:28:37 -0400
Subject: [PATCH 02/18] refactoring disease node page, updated phenotype
 section over view with new design

---
 frontend/src/components/AppDetail.vue         |  2 +-
 .../pages/node/SectionClinicalReources.vue    | 25 +++++-
 .../src/pages/node/SectionDiseaseOverview.vue | 74 +++++++++++++++++
 frontend/src/pages/node/SectionHierarchy.vue  |  1 -
 frontend/src/pages/node/SectionOverview.vue   | 83 +++++--------------
 5 files changed, 120 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/pages/node/SectionDiseaseOverview.vue

diff --git a/frontend/src/components/AppDetail.vue b/frontend/src/components/AppDetail.vue
index 4741c4586..57997dbb2 100644
--- a/frontend/src/components/AppDetail.vue
+++ b/frontend/src/components/AppDetail.vue
@@ -33,7 +33,7 @@
 
 type Props = {
   /** title of info block */
-  title: string;
+  title?: string;
   /** icon next to title */
   icon?: string;
   /** number next to title */
diff --git a/frontend/src/pages/node/SectionClinicalReources.vue b/frontend/src/pages/node/SectionClinicalReources.vue
index f2ae104c2..486b642e6 100644
--- a/frontend/src/pages/node/SectionClinicalReources.vue
+++ b/frontend/src/pages/node/SectionClinicalReources.vue
@@ -50,13 +50,36 @@
       </div>
     </div>
   </AppDetail>
+  <AppDetails v-else>
+    <AppDetail v-if="node?.inheritance" title="Heritability" :full="true">
+      <AppLink
+        v-tooltip="node?.inheritance?.name"
+        :to="node?.inheritance?.id || ''"
+        >{{ node?.inheritance?.name }}</AppLink
+      >
+    </AppDetail>
+    <AppDetail
+      v-if="node?.causal_gene?.length"
+      title="Casual Genes"
+      :full="true"
+    >
+      <AppFlex align-h="left" gap="small">
+        <AppNodeBadge
+          v-for="(gene, index) in node?.causal_gene"
+          :key="index"
+          :node="omit(gene, 'in_taxon_label')"
+        />
+      </AppFlex>
+    </AppDetail>
+  </AppDetails>
 </template>
 
 <script setup lang="ts">
-import { computed, type ComputedRef } from "vue";
+import { type ComputedRef } from "vue";
 import omit from "lodash/omit";
 import type { Entity, Node as ModelNode } from "@/api/model";
 import AppDetail from "@/components/AppDetail.vue";
+import AppDetails from "@/components/AppDetails.vue";
 import AppLink from "@/components/AppLink.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import { useClinicalResources } from "@/composables/use-clinical-resources";
diff --git a/frontend/src/pages/node/SectionDiseaseOverview.vue b/frontend/src/pages/node/SectionDiseaseOverview.vue
new file mode 100644
index 000000000..f9494c55d
--- /dev/null
+++ b/frontend/src/pages/node/SectionDiseaseOverview.vue
@@ -0,0 +1,74 @@
+<!-- SectionDiseaseOverview.vue -->
+<template>
+  <AppDetails gap="20px">
+    <!-- Clinical resources ( heritability/causal genes/frequency) -->
+    <SectionClinicalReources :frequency-label="frequencyLabel" :node="node" />
+
+    <!-- Equivalent concepts (disease) -->
+    <AppDetail
+      v-if="otherMappings && otherMappings.length"
+      title="Equivalent disease concepts in other terminologies"
+      :full="true"
+    >
+      <AppFlex align-h="left" gap="small">
+        <AppLink
+          v-for="m in otherMappings"
+          :key="m.id || m.url"
+          :to="m.url || ''"
+        >
+          {{ m.id }}
+        </AppLink>
+      </AppFlex>
+    </AppDetail>
+
+    <!-- External references -->
+    <AppDetail
+      v-if="externalRefs?.length"
+      title="External References"
+      :full="true"
+    >
+      <AppFlex align-h="left" gap="small">
+        <AppLink
+          v-for="(link, i) in externalRefs"
+          :key="i"
+          :to="link.url || ''"
+        >
+          {{ link.id }}
+        </AppLink>
+      </AppFlex>
+    </AppDetail>
+
+    <!-- URI -->
+    <AppDetail v-if="node.uri" title="URI">
+      <AppLink :to="node.uri || ''">{{ node.id }}</AppLink>
+    </AppDetail>
+
+    <!-- Ingest docs -->
+    <AppDetail v-if="node.provided_by_link" title="Ingest Documentation">
+      <AppLink :to="node.provided_by_link?.url || ''">
+        {{ node.provided_by_link?.id || node.provided_by }}
+      </AppLink>
+    </AppDetail>
+  </AppDetails>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Node } from "@/api/model";
+import AppDetail from "@/components/AppDetail.vue";
+import AppDetails from "@/components/AppDetails.vue";
+import AppFlex from "@/components/AppFlex.vue";
+import AppLink from "@/components/AppLink.vue";
+import { useClinicalResources } from "@/composables/use-clinical-resources";
+import SectionClinicalReources from "./SectionClinicalReources.vue";
+
+const props = defineProps<{ node: Node }>();
+
+// pull mappings/refs specific to this node
+const { otherMappings, externalRefs } = useClinicalResources(props.node);
+
+// frequency label lives with the blue block
+const frequencyLabel = computed<"Rare" | "Common">(() =>
+  props.node.subsets?.includes("rare") ? "Rare" : "Common",
+);
+</script>
diff --git a/frontend/src/pages/node/SectionHierarchy.vue b/frontend/src/pages/node/SectionHierarchy.vue
index b1aa9958a..629eca050 100644
--- a/frontend/src/pages/node/SectionHierarchy.vue
+++ b/frontend/src/pages/node/SectionHierarchy.vue
@@ -38,7 +38,6 @@
         </AppFlex>
       </AppDetail>
 
-      <!-- nodes that are "children" of node -->
       <AppDetail
         :title="`Sub-classes (${node.node_hierarchy?.sub_classes.length})`"
         icon="angle-down"
diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index 266985d4f..fb8397f3b 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -46,15 +46,17 @@
         <AppTagList :tags="node.synonym ?? []" />
       </AppDetail>
 
-      <!--Temperory condition for diesease node-->
-      <AppDetails v-if="isDiseaseNode || isphenotypeNode" gap="20px">
-        <SectionClinicalReources
-          :frequency-label="frequencyLabel"
-          :node="node"
-        />
+      <SectionDiseaseOverview v-if="isDiseaseNode" :node="node" />
+      <!--For all other nodes other than diesease nodes-->
+      <AppDetails v-else gap="20px">
         <AppDetail
           v-if="otherMappings.length"
-          title="Equivalent disease concepts in other termiologies"
+          title="`Equivalent"
+          ${categoryLabel}
+          concepts
+          in
+          other
+          termiologies``
           :full="true"
         >
           <AppFlex align-h="left" gap="small">
@@ -69,13 +71,13 @@
         </AppDetail>
         <!-- external references -->
         <AppDetail
-          v-if="externalRefs?.length"
+          v-if="node.external_links?.length"
           title="External References"
           :full="true"
         >
           <AppFlex align-h="left" gap="small">
             <AppLink
-              v-for="(link, index) of externalRefs"
+              v-for="(link, index) of node.external_links"
               :key="index"
               :to="link.url || ''"
               >{{ link.id }}</AppLink
@@ -83,21 +85,6 @@
           </AppFlex>
         </AppDetail>
 
-        <AppDetail v-if="node.uri" title="URI">
-          <AppLink :to="node.uri || ''">
-            {{ node.id }}
-          </AppLink>
-        </AppDetail>
-
-        <AppDetail v-if="node.provided_by_link" title="Ingest Documentation">
-          <AppLink :to="node.provided_by_link?.url || ''">
-            {{ node.provided_by_link?.id || node.provided_by }}
-          </AppLink>
-        </AppDetail>
-      </AppDetails>
-
-      <!--For all other nodes other than diesease nodes-->
-      <AppDetails v-else gap="20px">
         <!-- URI -->
         <AppDetail v-if="node.uri" title="URI">
           <AppLink :to="node.uri || ''">
@@ -137,37 +124,6 @@
             {{ node.provided_by_link?.id || node.provided_by }}
           </AppLink>
         </AppDetail>
-
-        <AppDetail
-          v-if="otherMappings.length"
-          title="Other Mappings"
-          :full="true"
-        >
-          <AppFlex align-h="left" gap="small">
-            <AppLink
-              v-for="(mapping, index) in otherMappings"
-              :key="index"
-              :to="mapping.url || ''"
-            >
-              {{ mapping.id }}
-            </AppLink>
-          </AppFlex>
-        </AppDetail>
-        <!-- external references -->
-        <AppDetail
-          v-if="node.external_links?.length"
-          title="External References"
-          :full="true"
-        >
-          <AppFlex align-h="left" gap="small">
-            <AppLink
-              v-for="(link, index) of node.external_links"
-              :key="index"
-              :to="link.url || ''"
-              >{{ link.id }}</AppLink
-            >
-          </AppFlex>
-        </AppDetail>
       </AppDetails>
     </AppDetails>
   </AppSection>
@@ -179,19 +135,24 @@ import omit from "lodash/omit";
 import type { Node } from "@/api/model";
 import AppDetail from "@/components/AppDetail.vue";
 import AppDetails from "@/components/AppDetails.vue";
-import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppNodeText from "@/components/AppNodeText.vue";
 import AppTagList from "@/components/AppTagList.vue";
 import { useClinicalResources } from "@/composables/use-clinical-resources";
 import SectionClinicalReources from "./SectionClinicalReources.vue";
+import SectionDiseaseOverview from "./SectionDiseaseOverview.vue";
 
 type Props = { node: Node };
 
 const { node } = defineProps<Props>();
 const isDiseaseNode = computed(() => node.category === "biolink:Disease");
-const isphenotypeNode = computed(
+const isPhenotypeNode = computed(
   () => node.category === "biolink:PhenotypicFeature",
 );
+const { otherMappings, externalRefs } = useClinicalResources(node);
+const CATEGORY_MAP: Record<string, string> = {
+  "biolink:Disease": "disease",
+  "biolink:PhenotypicFeature": "phenotype",
+};
 /** separate out mappings into categories */
 const clinicalSynopsis = computed(
   () =>
@@ -210,11 +171,9 @@ const frequencyLabel = computed((): "Rare" | "Common" => {
   return node.subsets?.includes("rare") ? "Rare" : "Common";
 });
 
-const { otherMappings, externalRefs } = useClinicalResources(node);
-// async function scrollToAssociations() {
-//   await sleep(100);
-//   scrollTo("#associations");
-// }
+const categoryLabel = computed(
+  () => CATEGORY_MAP[node?.category ?? ""] ?? node?.category ?? "",
+);
 </script>
 
 <style lang="scss" scoped>

From 06eccb3a28427bb32ddc7400d54fcab1f0cf43cc Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Tue, 9 Sep 2025 11:24:38 -0400
Subject: [PATCH 03/18] minor console warning fixes

---
 frontend/src/components/AppIcon.vue           | 11 +++++++++--
 frontend/src/pages/node/AssociationsTable.vue |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index fbc548636..e6a1df835 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -41,7 +41,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, ref, type VNode } from "vue";
+import {
+  computed,
+  defineAsyncComponent,
+  defineComponent,
+  ref,
+  type VNode,
+} from "vue";
 import { kebabCase } from "lodash";
 import type { IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core";
 import { findIconDefinition } from "@fortawesome/fontawesome-svg-core";
@@ -74,12 +80,13 @@ const fontAwesome = computed(() => {
 
 const isCustom = ref(true);
 const isPng = computed(() => props.icon.endsWith(".png"));
+const Noop = defineComponent({ name: "Noop", setup: () => () => null });
 
 /** look for custom icon with matching name */
 const customIcon = defineAsyncComponent(async () => {
   if (isPng.value) {
     isCustom.value = false;
-    return;
+    return Noop;
   }
   try {
     return await import(`../assets/icons/${kebabCase(props.icon)}.svg`);
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index a2ec27054..db346dbf5 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -227,7 +227,9 @@ type Props = {
   search: string;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  search: "",
+});
 
 const showModal = ref(false);
 const selectedAssociation = ref<DirectionalAssociation | null>(null);

From 536ef4670b942e27cafe1b806a16c50b8dd73eb9 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Tue, 9 Sep 2025 11:25:01 -0400
Subject: [PATCH 04/18] added tabs for phenotype pages

---
 .../src/pages/node/SectionAssociations.vue    | 21 ++++++++++++-------
 frontend/src/pages/node/SectionOverview.vue   |  7 +------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index a45ce9417..270bae553 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -16,7 +16,7 @@
 
       <!--tabs omly if its disease node-->
       <AppAssociationTabs
-        v-if="isDiseaseNode"
+        v-if="isDiseaseNode || isPhenotypeNode"
         :has-direct-associations="hasDirectAssociationsForCategory(category.id)"
         :show-all-tab="showAllTab(category.count ?? 0, category.id)"
         :direct-active="
@@ -129,7 +129,10 @@ const onTotals = ({
 };
 
 const isDiseaseNode = computed(() => nodeCategory === "biolink:Disease");
-
+const isPhenotypeNode = computed(
+  () => nodeCategory === "biolink:PhenotypicFeature",
+);
+console.log("nodeCategory", nodeCategory);
 const directFor = (id: string) => totalsByCategory.value[id]?.direct ?? 0;
 const allFor = (id: string) => totalsByCategory.value[id]?.all ?? 0;
 
@@ -191,16 +194,18 @@ const showAllTab = computed(() => {
  * Non-disease nodes always default to "all".
  */
 
-function defaultTab(categoryId: string): "direct" | "all" {
+const defaultTab = (categoryId: string): "direct" | "all" => {
   const directCount = directFor(categoryId);
   const isDisease = isDiseaseNode.value;
 
-  if (!isDisease) {
-    return "all";
+  // Disease or Phenotype: default to Direct if any direct rows exist, else Inferred (all)
+  if (isDiseaseNode.value || isPhenotypeNode.value) {
+    return directCount > 0 ? "direct" : "all";
   }
-  // disease node: no direct → all, else → direct
-  return directCount > 0 ? "direct" : "all";
-}
+
+  // Other node types: default to Inferred (all)
+  return "all";
+};
 
 /**
  * - For non-disease pages(temperory, will change once we get the new layout):
diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index fb8397f3b..9492238c6 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -51,12 +51,7 @@
       <AppDetails v-else gap="20px">
         <AppDetail
           v-if="otherMappings.length"
-          title="`Equivalent"
-          ${categoryLabel}
-          concepts
-          in
-          other
-          termiologies``
+          :title="`Equivalent ${categoryLabel} concepts in other terminologies`"
           :full="true"
         >
           <AppFlex align-h="left" gap="small">

From a715d5e74f8507179ef9ef8f288c575ab96102a4 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Tue, 9 Sep 2025 11:32:23 -0400
Subject: [PATCH 05/18] clean up

---
 frontend/src/components/AppIcon.vue           | 4 ++--
 frontend/src/pages/node/AssociationsTable.vue | 4 ++--
 frontend/src/pages/node/associationColumns.ts | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index e6a1df835..68d427823 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -115,7 +115,7 @@ const initials = computed(
 );
 
 /** when custom icon mounted */
-function customMounted(element: VNode["el"], createCircle = false) {
+const customMounted = (element: VNode["el"], createCircle = false) => {
   /** add child elements to category icon */
   if (
     element &&
@@ -138,7 +138,7 @@ function customMounted(element: VNode["el"], createCircle = false) {
       element.insertBefore(outline, element.firstChild!);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index db346dbf5..18e40bb8a 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -243,10 +243,10 @@ const emit = defineEmits<{
   (e: "inferred-label", payload: { categoryId: string; label: string }): void;
 }>();
 
-function openModal(association: DirectionalAssociation) {
+const openModal = (association: DirectionalAssociation) => {
   selectedAssociation.value = association;
   showModal.value = true;
-}
+};
 
 watch(showModal, (newValue) => {
   if (!newValue) {
diff --git a/frontend/src/pages/node/associationColumns.ts b/frontend/src/pages/node/associationColumns.ts
index 3d982a9cc..c1c4a4a47 100644
--- a/frontend/src/pages/node/associationColumns.ts
+++ b/frontend/src/pages/node/associationColumns.ts
@@ -18,7 +18,7 @@ export interface ColumnContext {
 }
 
 /** Build the AppTable columns for an association category. . */
-export function buildAssociationCols(ctx: ColumnContext): Cols<Datum> {
+export const buildAssociationCols = (ctx: ColumnContext): Cols<Datum> => {
   const { categoryId, nodeCategory, isDirect, items, getCategoryLabel } = ctx;
 
   const first = items?.[0];
@@ -251,4 +251,4 @@ export function buildAssociationCols(ctx: ColumnContext): Cols<Datum> {
   if (extraCols.length) (extraCols as any).unshift({ slot: "divider" });
 
   return [...baseCols, ...extraCols];
-}
+};

From 1abc20adefd56be2f19b3080f2771bf0eeac4925 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Mon, 13 Oct 2025 12:19:10 -0400
Subject: [PATCH 06/18] added inferred and direct tooltipf for phenotype node
 pages

---
 .../src/pages/node/SectionAssociations.vue    |  11 +-
 frontend/src/util/tooltipText.ts              | 289 +++++++++++++-----
 2 files changed, 221 insertions(+), 79 deletions(-)

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 270bae553..b4da930d1 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -68,6 +68,7 @@
 
       <template v-if="category">
         <!-- table view of associations -->
+        {{ category.id }}
         <AssociationsTable
           :node="node"
           :category="category"
@@ -106,7 +107,7 @@ type Totals = { direct: number; all: number };
 type TotalsMap = Record<string, Totals>;
 const totalsByCategory = ref<TotalsMap>({});
 
-const { category: nodeCategory } = props.node;
+const nodeCategory: string = props.node?.category ?? "";
 
 const selectedTabs = ref<Record<string, "all" | "direct">>({});
 const searchValues = ref<Record<string, string>>({});
@@ -132,7 +133,7 @@ const isDiseaseNode = computed(() => nodeCategory === "biolink:Disease");
 const isPhenotypeNode = computed(
   () => nodeCategory === "biolink:PhenotypicFeature",
 );
-console.log("nodeCategory", nodeCategory);
+
 const directFor = (id: string) => totalsByCategory.value[id]?.direct ?? 0;
 const allFor = (id: string) => totalsByCategory.value[id]?.all ?? 0;
 
@@ -158,7 +159,7 @@ const setDirect = (categoryId: string, directId: "true" | "false") => {
   selectedTabs.value[categoryId] = directId === "true" ? "direct" : "all";
 };
 const directTooltip = (categoryId: string): string | undefined => {
-  return formatDirectTooltip(categoryId, {
+  return formatDirectTooltip(categoryId, nodeCategory, {
     node: props.node.name,
     label: labelFor(categoryId),
     n: directFor(categoryId),
@@ -166,13 +167,13 @@ const directTooltip = (categoryId: string): string | undefined => {
 };
 
 const inferredTooltip = (categoryId: string): string | undefined => {
-  return formatInferredTooltip(categoryId, {
+  return formatInferredTooltip(categoryId, nodeCategory, {
     node: props.node.name,
     label: labelFor(categoryId),
     all: allFor(categoryId),
     n: directFor(categoryId),
     diff: diffFor(categoryId),
-    example: inferredByCategory.value[categoryId], // optional subclass example text
+    example: inferredByCategory.value[categoryId],
   });
 };
 
diff --git a/frontend/src/util/tooltipText.ts b/frontend/src/util/tooltipText.ts
index d83c3701a..d040e61b6 100644
--- a/frontend/src/util/tooltipText.ts
+++ b/frontend/src/util/tooltipText.ts
@@ -28,26 +28,75 @@ const pluralWord = (
 
 const fmtCount = (n: number | null | undefined) => (n ?? 0).toLocaleString();
 
+// ---------- Types ----------
+type NodeCategoryId = "biolink:Disease" | "biolink:PhenotypicFeature"; // add more later
+type AssocId =
+  | "biolink:DiseaseToPhenotypicFeatureAssociation"
+  | "biolink:GeneToPhenotypicFeatureAssociation"
+  | "biolink:CausalGeneToDiseaseAssociation"
+  | "biolink:CorrelatedGeneToDiseaseAssociation"
+  | "biolink:GenotypeToDiseaseAssociation"
+  | "biolink:VariantToDiseaseAssociation";
+
+type TemplatesByAssoc = Partial<Record<AssocId, Fmt>>;
+type TemplatesByNodeCategory = Partial<
+  Record<NodeCategoryId, TemplatesByAssoc>
+>;
+
+const DIRECT_TEMPLATES: TemplatesByNodeCategory = {
+  // Existing copy for Disease nodes
+  "biolink:Disease": {
+    "biolink:DiseaseToPhenotypicFeatureAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "phenotype", "phenotypes")} directly associated with ${node}`,
+    "biolink:GeneToPhenotypicFeatureAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "gene with phenotypes", "genes with phenotypes")} that are directly associated with ${node}`,
+    "biolink:CausalGeneToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "causal gene", "causal genes")} that causes ${node}`,
+    "biolink:CorrelatedGeneToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "correlated gene", "correlated genes")} for ${node}`,
+    "biolink:GenotypeToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} that model ${node}`,
+    "biolink:VariantToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} directly associated with ${node}`,
+  },
+
+  // New copy for PhenotypicFeature nodes
+  "biolink:PhenotypicFeature": {
+    "biolink:DiseaseToPhenotypicFeatureAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "disease", "diseases")} directly associated with ${node}`,
+    "biolink:GeneToPhenotypicFeatureAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} with phenotypic feature ${node}`,
+    "biolink:CausalGeneToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "causal gene", "causal genes")} for diseases that exhibit ${node}`,
+    "biolink:CorrelatedGeneToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "correlated gene", "correlated genes")} for diseases that exhibit ${node}`,
+    "biolink:GenotypeToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} that model diseases exhibiting ${node}`,
+    "biolink:VariantToDiseaseAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} for diseases that exhibit ${node}`,
+  },
+};
+
 // ----- DIRECT (only shown when n > 0) -----
-const DIRECT: Record<string, Fmt> = {
-  "biolink:DiseaseToPhenotypicFeatureAssociation": ({ n, node }) =>
-    `${fmtCount(n)} ${pluralWord(n, "phenotype", "phenotypes")} directly associated with ${node}`,
+// const DIRECT: Record<string, Fmt> = {
+//   "biolink:DiseaseToPhenotypicFeatureAssociation": ({ n, node }) =>
+//     `${fmtCount(n)} ${pluralWord(n, "phenotype", "phenotypes")} directly associated with ${node}`,
 
-  "biolink:GeneToPhenotypicFeatureAssociation": ({ n, node }) =>
-    `${fmtCount(n)} ${pluralWord(n, "gene with phenotypes", "genes with phenotypes")} that are directly associated with ${node}`,
+//   "biolink:GeneToPhenotypicFeatureAssociation": ({ n, node }) =>
+//     `${fmtCount(n)} ${pluralWord(n, "gene with phenotypes", "genes with phenotypes")} that are directly associated with ${node}`,
 
-  "biolink:CausalGeneToDiseaseAssociation": ({ n, node }) =>
-    `${fmtCount(n)} ${pluralWord(n, "causal gene", "causal genes")} that causes ${node}`,
+//   "biolink:CausalGeneToDiseaseAssociation": ({ n, node }) =>
+//     `${fmtCount(n)} ${pluralWord(n, "causal gene", "causal genes")} that causes ${node}`,
 
-  "biolink:CorrelatedGeneToDiseaseAssociation": ({ n, node }) =>
-    `${fmtCount(n)} ${pluralWord(n, "correlated gene", "correlated genes")} for ${node}`,
+//   "biolink:CorrelatedGeneToDiseaseAssociation": ({ n, node }) =>
+//     `${fmtCount(n)} ${pluralWord(n, "correlated gene", "correlated genes")} for ${node}`,
 
-  "biolink:GenotypeToDiseaseAssociation": ({ n, node }) =>
-    `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} that model ${node}`,
+//   "biolink:GenotypeToDiseaseAssociation": ({ n, node }) =>
+//     `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} that model ${node}`,
 
-  "biolink:VariantToDiseaseAssociation": ({ n, node }) =>
-    `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} directly associated with ${node}`,
-};
+//   "biolink:VariantToDiseaseAssociation": ({ n, node }) =>
+//     `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} directly associated with ${node}`,
+// };
 
 // default direct template (fallback)
 const defaultDirect: Fmt = ({ n, node, label }) =>
@@ -56,55 +105,128 @@ const defaultDirect: Fmt = ({ n, node, label }) =>
 // ----- INFERRED (only shown when all > 0) -----
 // If no direct, keep it short: “{all} … associated with …”
 // If direct > 0, include both and the subclass example if you have one.
-const INFERRED: Record<string, Fmt> = {
-  "biolink:DiseaseToPhenotypicFeatureAssociation": ({
-    all,
-    n,
-    diff,
-    node,
-    example,
-  }) =>
-    (n ?? 0) > 0
-      ? `${pluralize(n, "phenotype", "phenotypes")} directly associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} ${example ? ` such as ${q(example)}` : ""}`
-      : `${fmtCount(all)} phenotypes associated with ${node}`,
-  "biolink:GeneToPhenotypicFeatureAssociation": ({
-    all,
-    n,
-    diff,
-    node,
-    example,
-  }) =>
-    (n ?? 0) > 0
-      ? `Phenotypes of the ${pluralize(n, "gene", "genes")} that cause subclasses of ${node} such as ${q(example)}`
-      : ` ${pluralize(all, "gene", "genes")} with phenotypes associated with ${node}`,
-  "biolink:CausalGeneToDiseaseAssociation": ({
-    all,
-    n,
-    diff,
-    node,
-    example,
-  }) =>
-    (n ?? 0) > 0
-      ? ` ${pluralize(n, "gene", "genes")} that causes ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as  ${example ? ` (e.g., ${q(example)})` : ""}`
-      : `${pluralize(all, "gene", "genes")} that cause subtypes of ${node} such as ${q(example)}`,
-  "biolink:CorrelatedGeneToDiseaseAssociation": ({
-    all,
-    n,
-    diff,
-    node,
-    example,
-  }) =>
-    (n ?? 0) > 0
-      ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as wells as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
-      : ` ${pluralize(all, "correlated gene", "correlated genes")} associated with ${node}`,
-  "biolink:GenotypeToDiseaseAssociation": ({ all, n, diff, node, example }) =>
-    (n ?? 0) > 0
-      ? `${pluralize(n, "disease model", "disease models")} that are assciated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
-      : ` ${pluralize(all, "disease model", "disease models")} that are assciated with ${node}`,
-  "biolink:VariantToDiseaseAssociation": ({ all, n, diff, node, example }) =>
-    (n ?? 0) > 0
-      ? ` ${pluralize(n, "variant", "variants")} that are assciated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
-      : ` ${pluralize(all, "variant", "variants")} that are assciated with ${node}`,
+
+const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
+  // When the node is a Disease
+
+  "biolink:Disease": {
+    "biolink:DiseaseToPhenotypicFeatureAssociation": ({
+      all,
+      n,
+      diff,
+      node,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? `${pluralize(n, "phenotype", "phenotypes")} directly associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} ${example ? ` such as ${q(example)}` : ""}`
+        : `${fmtCount(all)} phenotypes associated with ${node}`,
+    "biolink:GeneToPhenotypicFeatureAssociation": ({
+      all,
+      n,
+      diff,
+      node,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? `Phenotypes of the ${pluralize(n, "gene", "genes")} that cause subclasses of ${node} such as ${q(example)}`
+        : ` ${pluralize(all, "gene", "genes")} with phenotypes associated with ${node}`,
+    "biolink:CausalGeneToDiseaseAssociation": ({
+      all,
+      n,
+      diff,
+      node,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? ` ${pluralize(n, "gene", "genes")} that causes ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as  ${example ? ` (e.g., ${q(example)})` : ""}`
+        : `${pluralize(all, "gene", "genes")} that cause subtypes of ${node} such as ${q(example)}`,
+    "biolink:CorrelatedGeneToDiseaseAssociation": ({
+      all,
+      n,
+      diff,
+      node,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as wells as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
+        : ` ${pluralize(all, "correlated gene", "correlated genes")} associated with ${node}`,
+    "biolink:GenotypeToDiseaseAssociation": ({
+      all,
+      n,
+      diff,
+      node,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? `${pluralize(n, "disease model", "disease models")} that are assciated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
+        : ` ${pluralize(all, "disease model", "disease models")} that are assciated with ${node}`,
+    "biolink:VariantToDiseaseAssociation": ({ all, n, diff, node, example }) =>
+      (n ?? 0) > 0
+        ? ` ${pluralize(n, "variant", "variants")} that are assciated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
+        : ` ${pluralize(all, "variant", "variants")} that are assciated with ${node}`,
+  },
+  // When the node is a Phenotypic Feature
+  "biolink:PhenotypicFeature": {
+    "biolink:DiseaseToPhenotypicFeatureAssociation": ({
+      all,
+      n,
+      diff,
+      node,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "disease", "diseases")} directly associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")}${example ? ` such as ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "disease", "diseases")} associated with ${node}`,
+
+    "biolink:GeneToPhenotypicFeatureAssociation": ({
+      all,
+      n,
+      node,
+      diff,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} with the phenotypic feature ${node} as well as ${pluralize(diff, "subclass", "subclasses")}${example ? ` such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "gene", "genes")} with phenotypes that include ${node}`,
+
+    "biolink:CausalGeneToDiseaseAssociation": ({
+      all,
+      n,
+      node,
+      diff,
+      example,
+    }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "causal gene", "causal genes")} for diseases that exhibit ${node}  as well as  ${pluralize(diff, "subclass", "subclasses")} ${example ? `  such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "gene", "genes")} causing diseases that exhibit ${node}`,
+
+    "biolink:CorrelatedGeneToDiseaseAssociation": ({
+      all,
+      n,
+      node,
+      example,
+      diff,
+    }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "correlated gene", "correlated genes")} for diseases that exhibit ${node} as well as  ${pluralize(diff, "subclass", "subclasses")} ${example ? ` such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "correlated gene", "correlated genes")} associated with diseases exhibiting ${node}`,
+
+    "biolink:GenotypeToDiseaseAssociation": ({
+      all,
+      n,
+      node,
+      example,
+      diff,
+    }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} that model diseases exhibiting ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "genotype", "genotypes")} in disease models exhibiting ${node}`,
+
+    "biolink:VariantToDiseaseAssociation": ({ all, n, node, example, diff }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} for diseases that exhibit ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "variant", "variants")} associated with diseases exhibiting ${node}`,
+  },
 };
 
 // default inferred template (fallback)
@@ -115,22 +237,41 @@ const defaultInferred: Fmt = ({ all, n, diff, node, label, example }) =>
 
 export function formatDirectTooltip(
   categoryId: string,
-  v: Vars,
+  nodeCategory: string,
+  vars: Vars,
 ): string | undefined {
-  const n = v.n ?? 0;
-  if (!Number.isFinite(n) || n <= 0) return undefined; // hide when zero
-  const f = DIRECT[categoryId] ?? defaultDirect;
-  // ensure label fallback if a category isn’t in DIRECT
-  return f({ ...v, label: v.label || labelFor(categoryId) });
+  const directCount = vars.n ?? 0;
+  if (!Number.isFinite(directCount) || directCount <= 0) return undefined;
+
+  const nodeTemplates =
+    DIRECT_TEMPLATES[
+      nodeCategory as "biolink:Disease" | "biolink:PhenotypicFeature"
+    ];
+
+  const directTemplate =
+    nodeTemplates?.[categoryId as AssocId] ?? defaultDirect;
+
+  const label = vars.label ?? labelFor(categoryId);
+
+  return directTemplate({ ...vars, label });
 }
 
 export function formatInferredTooltip(
   categoryId: string,
-  v: Vars,
+  nodeCategory: string,
+  vars: Vars,
 ): string | undefined {
-  const all = v.all ?? 0;
+  const totalCount = vars.all ?? 0;
+  if (!Number.isFinite(totalCount) || totalCount <= 0) return undefined;
+
+  const nodeTemplates =
+    INFERRED_TEMPLATES[
+      nodeCategory as "biolink:Disease" | "biolink:PhenotypicFeature"
+    ];
+
+  const inferredTemplate =
+    nodeTemplates?.[categoryId as AssocId] ?? defaultInferred;
 
-  if (!Number.isFinite(all) || all <= 0) return undefined;
-  const f = INFERRED[categoryId] ?? defaultInferred;
-  return f({ ...v, label: v.label || labelFor(categoryId) });
+  const label = vars.label ?? labelFor(categoryId);
+  return inferredTemplate({ ...vars, label });
 }

From 5482a9431b3f2be89180443f44f368a9903f31fb Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Mon, 13 Oct 2025 13:25:43 -0400
Subject: [PATCH 07/18] clean up

---
 frontend/src/pages/node/SectionAssociations.vue     | 1 -
 frontend/src/pages/node/SectionClinicalReources.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index b4da930d1..7675955b2 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -68,7 +68,6 @@
 
       <template v-if="category">
         <!-- table view of associations -->
-        {{ category.id }}
         <AssociationsTable
           :node="node"
           :category="category"
diff --git a/frontend/src/pages/node/SectionClinicalReources.vue b/frontend/src/pages/node/SectionClinicalReources.vue
index 486b642e6..b8a1577cb 100644
--- a/frontend/src/pages/node/SectionClinicalReources.vue
+++ b/frontend/src/pages/node/SectionClinicalReources.vue
@@ -94,7 +94,6 @@ type Props = {
 };
 
 const { node, frequencyLabel } = defineProps<Props>();
-console.log("node in clinical resources", node);
 const clinicalResources = useClinicalResources(node)
   .clinicalResources as ComputedRef<ClinicalResourceEntry[]>;
 const chipStyle = (res: ClinicalResourceEntry) => {

From b50cf16862bdf0dff2103e62a4060899f59615e2 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Mon, 13 Oct 2025 14:03:27 -0400
Subject: [PATCH 08/18] clean up

---
 frontend/src/util/tooltipText.ts | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/src/util/tooltipText.ts b/frontend/src/util/tooltipText.ts
index d040e61b6..65d6e133e 100644
--- a/frontend/src/util/tooltipText.ts
+++ b/frontend/src/util/tooltipText.ts
@@ -1,6 +1,7 @@
 import { labelFor } from "@/util/typeConfig";
 import { pluralize } from "./plural";
 
+// ---------- Types ----------
 export type Vars = {
   node?: string;
   label?: string;
@@ -11,6 +12,19 @@ export type Vars = {
 };
 
 type Fmt = (v: Vars) => string;
+type NodeCategoryId = "biolink:Disease" | "biolink:PhenotypicFeature"; // add more later
+type AssocId =
+  | "biolink:DiseaseToPhenotypicFeatureAssociation"
+  | "biolink:GeneToPhenotypicFeatureAssociation"
+  | "biolink:CausalGeneToDiseaseAssociation"
+  | "biolink:CorrelatedGeneToDiseaseAssociation"
+  | "biolink:GenotypeToDiseaseAssociation"
+  | "biolink:VariantToDiseaseAssociation";
+
+type TemplatesByAssoc = Partial<Record<AssocId, Fmt>>;
+type TemplatesByNodeCategory = Partial<
+  Record<NodeCategoryId, TemplatesByAssoc>
+>;
 
 // quoted example (no bold/italic), also collapses whitespace
 const q = (s?: string) => (s ? `“${s.replace(/\s+/g, " ").trim()}”` : "");
@@ -28,21 +42,6 @@ const pluralWord = (
 
 const fmtCount = (n: number | null | undefined) => (n ?? 0).toLocaleString();
 
-// ---------- Types ----------
-type NodeCategoryId = "biolink:Disease" | "biolink:PhenotypicFeature"; // add more later
-type AssocId =
-  | "biolink:DiseaseToPhenotypicFeatureAssociation"
-  | "biolink:GeneToPhenotypicFeatureAssociation"
-  | "biolink:CausalGeneToDiseaseAssociation"
-  | "biolink:CorrelatedGeneToDiseaseAssociation"
-  | "biolink:GenotypeToDiseaseAssociation"
-  | "biolink:VariantToDiseaseAssociation";
-
-type TemplatesByAssoc = Partial<Record<AssocId, Fmt>>;
-type TemplatesByNodeCategory = Partial<
-  Record<NodeCategoryId, TemplatesByAssoc>
->;
-
 const DIRECT_TEMPLATES: TemplatesByNodeCategory = {
   // Existing copy for Disease nodes
   "biolink:Disease": {

From 1ef40e4dd2488c595bc9c6e1992f6ad5c2253694 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Mon, 13 Oct 2025 14:12:30 -0400
Subject: [PATCH 09/18] clean up

---
 frontend/src/util/tooltipText.ts | 32 +++++---------------------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/frontend/src/util/tooltipText.ts b/frontend/src/util/tooltipText.ts
index 65d6e133e..b87974365 100644
--- a/frontend/src/util/tooltipText.ts
+++ b/frontend/src/util/tooltipText.ts
@@ -76,27 +76,6 @@ const DIRECT_TEMPLATES: TemplatesByNodeCategory = {
   },
 };
 
-// ----- DIRECT (only shown when n > 0) -----
-// const DIRECT: Record<string, Fmt> = {
-//   "biolink:DiseaseToPhenotypicFeatureAssociation": ({ n, node }) =>
-//     `${fmtCount(n)} ${pluralWord(n, "phenotype", "phenotypes")} directly associated with ${node}`,
-
-//   "biolink:GeneToPhenotypicFeatureAssociation": ({ n, node }) =>
-//     `${fmtCount(n)} ${pluralWord(n, "gene with phenotypes", "genes with phenotypes")} that are directly associated with ${node}`,
-
-//   "biolink:CausalGeneToDiseaseAssociation": ({ n, node }) =>
-//     `${fmtCount(n)} ${pluralWord(n, "causal gene", "causal genes")} that causes ${node}`,
-
-//   "biolink:CorrelatedGeneToDiseaseAssociation": ({ n, node }) =>
-//     `${fmtCount(n)} ${pluralWord(n, "correlated gene", "correlated genes")} for ${node}`,
-
-//   "biolink:GenotypeToDiseaseAssociation": ({ n, node }) =>
-//     `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} that model ${node}`,
-
-//   "biolink:VariantToDiseaseAssociation": ({ n, node }) =>
-//     `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} directly associated with ${node}`,
-// };
-
 // default direct template (fallback)
 const defaultDirect: Fmt = ({ n, node, label }) =>
   `${(n ?? 0).toLocaleString()} ${label} directly associated with ${node}`;
@@ -107,7 +86,6 @@ const defaultDirect: Fmt = ({ n, node, label }) =>
 
 const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
   // When the node is a Disease
-
   "biolink:Disease": {
     "biolink:DiseaseToPhenotypicFeatureAssociation": ({
       all,
@@ -147,7 +125,7 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       example,
     }) =>
       (n ?? 0) > 0
-        ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as wells as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
+        ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as well as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
         : ` ${pluralize(all, "correlated gene", "correlated genes")} associated with ${node}`,
     "biolink:GenotypeToDiseaseAssociation": ({
       all,
@@ -157,12 +135,12 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       example,
     }) =>
       (n ?? 0) > 0
-        ? `${pluralize(n, "disease model", "disease models")} that are assciated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
-        : ` ${pluralize(all, "disease model", "disease models")} that are assciated with ${node}`,
+        ? `${pluralize(n, "disease model", "disease models")} that are associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
+        : ` ${pluralize(all, "disease model", "disease models")} that are associated with ${node}`,
     "biolink:VariantToDiseaseAssociation": ({ all, n, diff, node, example }) =>
       (n ?? 0) > 0
-        ? ` ${pluralize(n, "variant", "variants")} that are assciated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
-        : ` ${pluralize(all, "variant", "variants")} that are assciated with ${node}`,
+        ? ` ${pluralize(n, "variant", "variants")} that are associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` ${q(example)}` : ""}`
+        : ` ${pluralize(all, "variant", "variants")} that are associated with ${node}`,
   },
   // When the node is a Phenotypic Feature
   "biolink:PhenotypicFeature": {

From 47bf703f6ca4c84b0dfd45e48b44a8fa21902cf8 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Mon, 13 Oct 2025 16:28:05 -0400
Subject: [PATCH 10/18] clean up

---
 frontend/src/pages/node/SectionOverview.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index 9492238c6..aaef5a3cf 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -126,24 +126,20 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import omit from "lodash/omit";
 import type { Node } from "@/api/model";
 import AppDetail from "@/components/AppDetail.vue";
 import AppDetails from "@/components/AppDetails.vue";
 import AppNodeText from "@/components/AppNodeText.vue";
 import AppTagList from "@/components/AppTagList.vue";
 import { useClinicalResources } from "@/composables/use-clinical-resources";
-import SectionClinicalReources from "./SectionClinicalReources.vue";
 import SectionDiseaseOverview from "./SectionDiseaseOverview.vue";
 
 type Props = { node: Node };
 
 const { node } = defineProps<Props>();
 const isDiseaseNode = computed(() => node.category === "biolink:Disease");
-const isPhenotypeNode = computed(
-  () => node.category === "biolink:PhenotypicFeature",
-);
-const { otherMappings, externalRefs } = useClinicalResources(node);
+
+const { otherMappings } = useClinicalResources(node);
 const CATEGORY_MAP: Record<string, string> = {
   "biolink:Disease": "disease",
   "biolink:PhenotypicFeature": "phenotype",
@@ -162,10 +158,6 @@ const infoForPatients = computed(
     ) || [],
 );
 
-const frequencyLabel = computed((): "Rare" | "Common" => {
-  return node.subsets?.includes("rare") ? "Rare" : "Common";
-});
-
 const categoryLabel = computed(
   () => CATEGORY_MAP[node?.category ?? ""] ?? node?.category ?? "",
 );

From 4f6c5a78877e22218d0dcace3a2d75f7cc9db0cf Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Mon, 13 Oct 2025 17:05:38 -0400
Subject: [PATCH 11/18] removed columns from tables

---
 frontend/src/pages/node/associationColumns.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/node/associationColumns.ts b/frontend/src/pages/node/associationColumns.ts
index c1c4a4a47..cf5586f84 100644
--- a/frontend/src/pages/node/associationColumns.ts
+++ b/frontend/src/pages/node/associationColumns.ts
@@ -52,6 +52,7 @@ export const buildAssociationCols = (ctx: ColumnContext): Cols<Datum> => {
     },
   ];
   const isDisease = nodeCategory === "biolink:Disease";
+  const isPhenotype = nodeCategory === "biolink:PhenotypicFeature";
 
   const extraCols: Cols<Datum> = [];
 
@@ -204,6 +205,17 @@ export const buildAssociationCols = (ctx: ColumnContext): Cols<Datum> => {
     }
   }
 
+  if (isPhenotype) {
+    if (categoryId === "biolink:DiseaseToPhenotypicFeatureAssociation") {
+      baseCols = baseCols.filter((col) => col.key !== "object_label");
+    }
+    if (
+      categoryId === "biolink:DiseaseToPhenotypicFeatureAssociation" ||
+      categoryId === "biolink:GeneToPhenotypicFeatureAssociation"
+    ) {
+      baseCols = baseCols.filter((col) => col.key !== "predicate");
+    }
+  }
   // Phenotype categories: add frequency + onset
   if (categoryId.includes("PhenotypicFeature")) {
     extraCols.push(
@@ -235,7 +247,7 @@ export const buildAssociationCols = (ctx: ColumnContext): Cols<Datum> => {
     nodeCategory === "biolink:Disease" &&
     categoryId === "biolink:GeneToPhenotypicFeatureAssociation"
   ) {
-    const iSub = baseCols.findIndex((c) => c.key === "subject_label");
+    const iSub = baseCols.findIndex((col) => col.key === "subject_label");
     if (iSub > -1)
       baseCols[iSub] = { ...baseCols[iSub], heading: "Causal Genes" };
 

From a16ba0b4df82afbf7dca20a08d323d3e3eea9d9d Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Tue, 14 Oct 2025 17:00:56 -0400
Subject: [PATCH 12/18] added two more variants to phenotype node association

---
 frontend/src/util/tooltipText.ts | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/util/tooltipText.ts b/frontend/src/util/tooltipText.ts
index b87974365..2fd18c684 100644
--- a/frontend/src/util/tooltipText.ts
+++ b/frontend/src/util/tooltipText.ts
@@ -19,7 +19,9 @@ type AssocId =
   | "biolink:CausalGeneToDiseaseAssociation"
   | "biolink:CorrelatedGeneToDiseaseAssociation"
   | "biolink:GenotypeToDiseaseAssociation"
-  | "biolink:VariantToDiseaseAssociation";
+  | "biolink:VariantToDiseaseAssociation"
+  | "biolink:GenotypeToPhenotypicFeatureAssociation"
+  | "biolink:VariantToPhenotypicFeatureAssociation";
 
 type TemplatesByAssoc = Partial<Record<AssocId, Fmt>>;
 type TemplatesByNodeCategory = Partial<
@@ -125,7 +127,7 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       example,
     }) =>
       (n ?? 0) > 0
-        ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as well as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
+        ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as wells as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
         : ` ${pluralize(all, "correlated gene", "correlated genes")} associated with ${node}`,
     "biolink:GenotypeToDiseaseAssociation": ({
       all,
@@ -164,7 +166,7 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
     }) =>
       (n ?? 0) > 0
         ? `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} with the phenotypic feature ${node} as well as ${pluralize(diff, "subclass", "subclasses")}${example ? ` such as  ${q(example)}` : ""}`
-        : `${fmtCount(all)} ${pluralWord(all, "gene", "genes")} with phenotypes that include ${node}`,
+        : `${fmtCount(all)} ${pluralWord(all, "gene", "genes")} with phe phenotypic feature  ${node}`,
 
     "biolink:CausalGeneToDiseaseAssociation": ({
       all,
@@ -203,13 +205,33 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       (n ?? 0) > 0
         ? `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} for diseases that exhibit ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
         : `${fmtCount(all)} ${pluralWord(all, "variant", "variants")} associated with diseases exhibiting ${node}`,
+    "biolink:GenotypeToPhenotypicFeatureAssociation": ({
+      all,
+      n,
+      node,
+      example,
+      diff,
+    }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} associated with ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "genotype", "genotypes")} associated with ${node}`,
+    "biolink:VariantToPhenotypicFeatureAssociation": ({
+      all,
+      n,
+      node,
+      example,
+      diff,
+    }) =>
+      (n ?? 0) > 0
+        ? `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} associated with ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "genotype", "genotypes")} associated with ${node}`,
   },
 };
 
 // default inferred template (fallback)
 const defaultInferred: Fmt = ({ all, n, diff, node, label, example }) =>
   (n ?? 0) > 0
-    ? `${(n ?? 0).toLocaleString()} ${label} directly associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")} such as ${example ? ` such as ${q(example)}` : ""}`
+    ? `${(n ?? 0).toLocaleString()} ${label} directly associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")}  ${example ? ` such as ${q(example)}` : ""}`
     : `${(all ?? 0).toLocaleString()} ${label} associated with ${node}`;
 
 export function formatDirectTooltip(

From c75c05cea43aa2bd5fc9f4742e20043d6544a71e Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Thu, 16 Oct 2025 10:56:44 -0400
Subject: [PATCH 13/18] fixed tooltip for phenotype node page

---
 frontend/src/pages/node/associationColumns.ts | 14 ++++---------
 frontend/src/util/tooltipText.ts              | 20 +++++++++++--------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/node/associationColumns.ts b/frontend/src/pages/node/associationColumns.ts
index cf5586f84..782906c87 100644
--- a/frontend/src/pages/node/associationColumns.ts
+++ b/frontend/src/pages/node/associationColumns.ts
@@ -205,16 +205,10 @@ export const buildAssociationCols = (ctx: ColumnContext): Cols<Datum> => {
     }
   }
 
-  if (isPhenotype) {
-    if (categoryId === "biolink:DiseaseToPhenotypicFeatureAssociation") {
-      baseCols = baseCols.filter((col) => col.key !== "object_label");
-    }
-    if (
-      categoryId === "biolink:DiseaseToPhenotypicFeatureAssociation" ||
-      categoryId === "biolink:GeneToPhenotypicFeatureAssociation"
-    ) {
-      baseCols = baseCols.filter((col) => col.key !== "predicate");
-    }
+  if (isPhenotype && isDirect) {
+    baseCols = baseCols.filter(
+      (col) => col.key !== "object_label" && col.key !== "predicate",
+    );
   }
   // Phenotype categories: add frequency + onset
   if (categoryId.includes("PhenotypicFeature")) {
diff --git a/frontend/src/util/tooltipText.ts b/frontend/src/util/tooltipText.ts
index 2fd18c684..ff08e2d66 100644
--- a/frontend/src/util/tooltipText.ts
+++ b/frontend/src/util/tooltipText.ts
@@ -66,7 +66,7 @@ const DIRECT_TEMPLATES: TemplatesByNodeCategory = {
     "biolink:DiseaseToPhenotypicFeatureAssociation": ({ n, node }) =>
       `${fmtCount(n)} ${pluralWord(n, "disease", "diseases")} directly associated with ${node}`,
     "biolink:GeneToPhenotypicFeatureAssociation": ({ n, node }) =>
-      `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} with phenotypic feature ${node}`,
+      `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} associated with phenotypic feature ${node}`,
     "biolink:CausalGeneToDiseaseAssociation": ({ n, node }) =>
       `${fmtCount(n)} ${pluralWord(n, "causal gene", "causal genes")} for diseases that exhibit ${node}`,
     "biolink:CorrelatedGeneToDiseaseAssociation": ({ n, node }) =>
@@ -75,6 +75,10 @@ const DIRECT_TEMPLATES: TemplatesByNodeCategory = {
       `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} that model diseases exhibiting ${node}`,
     "biolink:VariantToDiseaseAssociation": ({ n, node }) =>
       `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} for diseases that exhibit ${node}`,
+    "biolink:GenotypeToPhenotypicFeatureAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} associated with phenotypic feature ${node}`,
+    "biolink:VariantToPhenotypicFeatureAssociation": ({ n, node }) =>
+      `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} associated with phenotypic feature  ${node}`,
   },
 };
 
@@ -127,7 +131,7 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       example,
     }) =>
       (n ?? 0) > 0
-        ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as wells as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
+        ? `  ${pluralize(n, "correlated gene", "correlated genes")} for ${node} as well as  ${pluralize(diff, "subclass", "subclasses")} such as ${example ? `${q(example)}` : ""}`
         : ` ${pluralize(all, "correlated gene", "correlated genes")} associated with ${node}`,
     "biolink:GenotypeToDiseaseAssociation": ({
       all,
@@ -165,8 +169,8 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       example,
     }) =>
       (n ?? 0) > 0
-        ? `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} with the phenotypic feature ${node} as well as ${pluralize(diff, "subclass", "subclasses")}${example ? ` such as  ${q(example)}` : ""}`
-        : `${fmtCount(all)} ${pluralWord(all, "gene", "genes")} with phe phenotypic feature  ${node}`,
+        ? `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} associated with the phenotypic feature ${node} as well as ${pluralize(diff, "subclass", "subclasses")}${example ? ` such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "gene", "genes")} associated with phenotypic feature  ${node}`,
 
     "biolink:CausalGeneToDiseaseAssociation": ({
       all,
@@ -213,8 +217,8 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       diff,
     }) =>
       (n ?? 0) > 0
-        ? `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} associated with ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
-        : `${fmtCount(all)} ${pluralWord(all, "genotype", "genotypes")} associated with ${node}`,
+        ? `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} associated with phenotypic feature ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "genotype", "genotypes")} associated with phenotypic feature ${node}`,
     "biolink:VariantToPhenotypicFeatureAssociation": ({
       all,
       n,
@@ -223,8 +227,8 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       diff,
     }) =>
       (n ?? 0) > 0
-        ? `${fmtCount(n)} ${pluralWord(n, "genotype", "genotypes")} associated with ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
-        : `${fmtCount(all)} ${pluralWord(all, "genotype", "genotypes")} associated with ${node}`,
+        ? `${fmtCount(n)} ${pluralWord(n, "variant", "variants")} associated with associated with phenotypic feature ${node} as well as  ${pluralize(diff, "subclass", "subclasses")}  ${example ? `  such as  ${q(example)}` : ""}`
+        : `${fmtCount(all)} ${pluralWord(all, "variant", "variants")} associated with associated with phenotypic feature  ${node}`,
   },
 };
 

From eae9bf464c91fefb8fc00d46060e99e4cb6031d6 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Thu, 16 Oct 2025 11:16:10 -0400
Subject: [PATCH 14/18] hide other mappings

---
 frontend/src/pages/node/SectionOverview.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index aaef5a3cf..ed27c982a 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -50,7 +50,7 @@
       <!--For all other nodes other than diesease nodes-->
       <AppDetails v-else gap="20px">
         <AppDetail
-          v-if="otherMappings.length"
+          v-if="otherMappings.length && !isPhenotypeNode"
           :title="`Equivalent ${categoryLabel} concepts in other terminologies`"
           :full="true"
         >
@@ -138,7 +138,10 @@ type Props = { node: Node };
 
 const { node } = defineProps<Props>();
 const isDiseaseNode = computed(() => node.category === "biolink:Disease");
-
+const isPhenotypeNode = computed(
+  () => node.category === "biolink:PhenotypicFeature",
+);
+console.log("node.category", node.category);
 const { otherMappings } = useClinicalResources(node);
 const CATEGORY_MAP: Record<string, string> = {
   "biolink:Disease": "disease",

From 2715e0dcc74ef86e7519fb5bdfc730808797e79a Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Thu, 16 Oct 2025 12:52:44 -0400
Subject: [PATCH 15/18] clean up, lint fix

---
 frontend/e2e/sectionHierarchy.ts              |  5 +++-
 .../src/components/AppAssociationTabs.vue     |  2 +-
 frontend/src/components/AppDetail.vue         |  1 +
 frontend/src/components/AppIcon.vue           |  4 +--
 frontend/src/components/TheHeader.vue         | 30 +------------------
 .../src/components/TheTableOfContents.vue     |  1 -
 frontend/src/pages/node/AssociationsTable.vue |  4 +--
 frontend/src/pages/node/PageNode.vue          |  1 -
 .../src/pages/node/SectionAssociations.vue    |  1 -
 .../pages/node/SectionClinicalReources.vue    |  2 +-
 frontend/src/pages/node/SectionHierarchy.vue  |  6 ++--
 11 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/frontend/e2e/sectionHierarchy.ts b/frontend/e2e/sectionHierarchy.ts
index fa815d3b7..b4ca252b7 100644
--- a/frontend/e2e/sectionHierarchy.ts
+++ b/frontend/e2e/sectionHierarchy.ts
@@ -20,7 +20,10 @@ import SectionHeirarchy from "@/pages/node/SectionHierarchy.vue"; //
  */
 const AppModalStub = defineComponent({
   name: "AppModal",
-  props: { modelValue: { type: Boolean, default: false }, label: String },
+  props: {
+    modelValue: { type: Boolean, default: false },
+    label: { type: String, default: "" },
+  },
   emits: ["update:modelValue"],
   template: `<div v-if="modelValue" data-stub="modal"><slot /></div>`,
 });
diff --git a/frontend/src/components/AppAssociationTabs.vue b/frontend/src/components/AppAssociationTabs.vue
index 592fbcea8..bbf66e731 100644
--- a/frontend/src/components/AppAssociationTabs.vue
+++ b/frontend/src/components/AppAssociationTabs.vue
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import AppButton from "@/components/AppButton.vue";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     hasDirectAssociations: boolean;
     showAllTab: boolean;
diff --git a/frontend/src/components/AppDetail.vue b/frontend/src/components/AppDetail.vue
index 57997dbb2..356b29f47 100644
--- a/frontend/src/components/AppDetail.vue
+++ b/frontend/src/components/AppDetail.vue
@@ -52,6 +52,7 @@ withDefaults(defineProps<Props>(), {
   count: undefined,
   blank: false,
   full: false,
+  title: "",
 });
 
 type Slots = {
diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index 68d427823..a9786eec3 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -80,13 +80,13 @@ const fontAwesome = computed(() => {
 
 const isCustom = ref(true);
 const isPng = computed(() => props.icon.endsWith(".png"));
-const Noop = defineComponent({ name: "Noop", setup: () => () => null });
+const AppNoop = defineComponent({ name: "Noop", setup: () => () => null });
 
 /** look for custom icon with matching name */
 const customIcon = defineAsyncComponent(async () => {
   if (isPng.value) {
     isCustom.value = false;
-    return Noop;
+    return AppNoop;
   }
   try {
     return await import(`../assets/icons/${kebabCase(props.icon)}.svg`);
diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
index 66f07d9fc..e950d3694 100644
--- a/frontend/src/components/TheHeader.vue
+++ b/frontend/src/components/TheHeader.vue
@@ -109,7 +109,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import TheLogo from "@/assets/TheLogo.vue";
 import TabSearch from "@/components/TabSearch.vue";
@@ -153,14 +153,6 @@ const search = computed(
     ),
 );
 
-function scrollToHashWithOffset(hash: string, offset = 80) {
-  const el = document.querySelector(hash);
-  if (el) {
-    const y = el.getBoundingClientRect().top + window.scrollY - offset;
-    window.scrollTo({ top: y, behavior: "smooth" });
-  }
-}
-
 /** close nav */
 function close() {
   expanded.value = false;
@@ -188,26 +180,6 @@ onUnmounted(() => {
 // <script setup>
 const MOBILE_BREAKPOINT = 1000;
 const isMobile = computed(() => windowWidth.value <= MOBILE_BREAKPOINT);
-const isDesktop = computed(() => !isMobile.value);
-
-const isHome = home; // alias for readability
-const hasDate = computed(() => !!formattedReleaseDate.value);
-
-const stickyHeader = computed(() => !isHome.value || isMobile.value);
-const showHero = computed(() => isHome.value && isDesktop.value);
-
-// If you want loading to be visible before the date arrives:
-const showReleaseDesktop = computed(
-  () => showHero.value && (isLoading.value || hasDate.value),
-);
-const showReleaseMobile = computed(
-  () => isMobile.value && (isLoading.value || hasDate.value),
-);
-
-// Current search rule, but clearer:
-const showSearchBox = computed(
-  () => search.value && (isMobile.value || !isHome.value),
-);
 
 /** close nav when page changes */
 watch(() => route.name, close);
diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index e3bdffe45..8db17d7ce 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -64,7 +64,6 @@ import type { Node as ApiNode } from "@/api/model";
 import AppBackToTopButton from "@/components/AppBackToTopButton.vue";
 import SectionHierarchy from "@/pages/node/SectionHierarchy.vue";
 import { firstInView } from "@/util/dom";
-import AppCheckbox from "./AppCheckbox.vue";
 import type AppFlex from "./AppFlex.vue";
 
 type Entries = {
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 18e40bb8a..dbd77da20 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -184,7 +184,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, watchEffect } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import {
   downloadAssociations,
   getAssociations,
@@ -214,7 +214,7 @@ import {
 } from "@/pages/node/associationColumns";
 import { getBreadcrumbs } from "@/pages/node/AssociationsSummary.vue";
 import SectionAssociationDetails from "@/pages/node/SectionAssociationDetails.vue";
-import { fieldFor, TYPE_CONFIG } from "@/util/typeConfig";
+import { fieldFor } from "@/util/typeConfig";
 
 type Props = {
   /** current node */
diff --git a/frontend/src/pages/node/PageNode.vue b/frontend/src/pages/node/PageNode.vue
index 4090792fe..bcfa2d43a 100644
--- a/frontend/src/pages/node/PageNode.vue
+++ b/frontend/src/pages/node/PageNode.vue
@@ -44,7 +44,6 @@ import { addEntry } from "@/global/history";
 import { appDescription, appTitle } from "@/global/meta";
 import SectionBreadcrumbs from "@/pages/node/SectionBreadcrumbs.vue";
 import SectionAssociations from "./SectionAssociations.vue";
-import SectionHierarchy from "./SectionHierarchy.vue";
 import SectionOverview from "./SectionOverview.vue";
 import SectionTitle from "./SectionTitle.vue";
 import SectionVisualization from "./SectionVisualization.vue";
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 658da5500..e5b44459c 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -196,7 +196,6 @@ const showAllTab = computed(() => {
 
 const defaultTab = (categoryId: string): "direct" | "all" => {
   const directCount = directFor(categoryId);
-  const isDisease = isDiseaseNode.value;
 
   // Disease or Phenotype: default to Direct if any direct rows exist, else Inferred (all)
   if (isDiseaseNode.value || isPhenotypeNode.value) {
diff --git a/frontend/src/pages/node/SectionClinicalReources.vue b/frontend/src/pages/node/SectionClinicalReources.vue
index b8a1577cb..d6e72cd11 100644
--- a/frontend/src/pages/node/SectionClinicalReources.vue
+++ b/frontend/src/pages/node/SectionClinicalReources.vue
@@ -12,8 +12,8 @@
           :to="res.url || ''"
           class="brand-chip"
           :style="chipStyle(res)"
-          :aria-label="res.label || res.id"
           v-tooltip="res.tooltip"
+          :aria-label="res.label || res.id"
         >
           <span>
             {{ brandText(res.id, res.label) }}
diff --git a/frontend/src/pages/node/SectionHierarchy.vue b/frontend/src/pages/node/SectionHierarchy.vue
index b58d91564..14ea3fbb0 100644
--- a/frontend/src/pages/node/SectionHierarchy.vue
+++ b/frontend/src/pages/node/SectionHierarchy.vue
@@ -5,7 +5,7 @@
     <!-- PARENTS -->
     <div class="parents">
       <div v-for="p in parents" :key="p.id" class="parent-row">
-        <RouterLink :to="`/${p.id}`" v-tooltip="labelOf(p)" class="row-text">
+        <RouterLink v-tooltip="labelOf(p)" :to="`/${p.id}`" class="row-text">
           {{ labelOf(p) }}
         </RouterLink>
       </div>
@@ -13,7 +13,7 @@
 
     <!-- CURRENT NODE -->
     <div class="current-row">
-      <strong class="row-text" v-tooltip="labelOf(node)">{{
+      <strong v-tooltip="labelOf(node)" class="row-text">{{
         labelOf(node)
       }}</strong>
     </div>
@@ -21,7 +21,7 @@
     <!-- CHILDREN (tree connectors only) -->
     <div class="children">
       <div v-for="c in shownChildren" :key="c.id" class="child-row">
-        <RouterLink :to="`/${c.id}`" class="row-text" v-tooltip="labelOf(c)">
+        <RouterLink v-tooltip="labelOf(c)" :to="`/${c.id}`" class="row-text">
           {{ labelOf(c) }}
         </RouterLink>
       </div>

From 63a20fad284e1dddb85b2d85fc04a900563bacb3 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Thu, 16 Oct 2025 13:31:49 -0400
Subject: [PATCH 16/18] clean up

---
 frontend/src/components/AppIcon.vue                 | 2 +-
 frontend/src/components/TheHeader.vue               | 2 +-
 frontend/src/pages/node/SectionClinicalReources.vue | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index a9786eec3..c427087cd 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -80,7 +80,7 @@ const fontAwesome = computed(() => {
 
 const isCustom = ref(true);
 const isPng = computed(() => props.icon.endsWith(".png"));
-const AppNoop = defineComponent({ name: "Noop", setup: () => () => null });
+const AppNoop = defineComponent({ name: "AppNoop", setup: () => () => null });
 
 /** look for custom icon with matching name */
 const customIcon = defineAsyncComponent(async () => {
diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
index e950d3694..964efdd29 100644
--- a/frontend/src/components/TheHeader.vue
+++ b/frontend/src/components/TheHeader.vue
@@ -125,7 +125,7 @@ import TheSearchSuggestions from "./TheSearchSuggestions.vue";
 
 /** route info */
 const route = useRoute();
-const router = useRouter();
+
 /** is nav menu expanded */
 const expanded = ref(false);
 
diff --git a/frontend/src/pages/node/SectionClinicalReources.vue b/frontend/src/pages/node/SectionClinicalReources.vue
index d6e72cd11..c15961ec4 100644
--- a/frontend/src/pages/node/SectionClinicalReources.vue
+++ b/frontend/src/pages/node/SectionClinicalReources.vue
@@ -11,8 +11,8 @@
           :key="id"
           :to="res.url || ''"
           class="brand-chip"
-          :style="chipStyle(res)"
           v-tooltip="res.tooltip"
+          :style="chipStyle(res)"
           :aria-label="res.label || res.id"
         >
           <span>
@@ -77,7 +77,7 @@
 <script setup lang="ts">
 import { type ComputedRef } from "vue";
 import omit from "lodash/omit";
-import type { Entity, Node as ModelNode } from "@/api/model";
+import type { Node as ModelNode } from "@/api/model";
 import AppDetail from "@/components/AppDetail.vue";
 import AppDetails from "@/components/AppDetails.vue";
 import AppLink from "@/components/AppLink.vue";

From 3bfc219add4c3bdfde44b315d356223aa98a292b Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Thu, 16 Oct 2025 13:37:46 -0400
Subject: [PATCH 17/18] tooltip fix

---
 frontend/src/util/tooltipText.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/util/tooltipText.ts b/frontend/src/util/tooltipText.ts
index ff08e2d66..1bb0ff1c4 100644
--- a/frontend/src/util/tooltipText.ts
+++ b/frontend/src/util/tooltipText.ts
@@ -64,7 +64,7 @@ const DIRECT_TEMPLATES: TemplatesByNodeCategory = {
   // New copy for PhenotypicFeature nodes
   "biolink:PhenotypicFeature": {
     "biolink:DiseaseToPhenotypicFeatureAssociation": ({ n, node }) =>
-      `${fmtCount(n)} ${pluralWord(n, "disease", "diseases")} directly associated with ${node}`,
+      `${fmtCount(n)} ${pluralWord(n, "disease", "diseases")} directly associated with phenotypic feature ${node}`,
     "biolink:GeneToPhenotypicFeatureAssociation": ({ n, node }) =>
       `${fmtCount(n)} ${pluralWord(n, "gene", "genes")} associated with phenotypic feature ${node}`,
     "biolink:CausalGeneToDiseaseAssociation": ({ n, node }) =>
@@ -158,7 +158,7 @@ const INFERRED_TEMPLATES: TemplatesByNodeCategory = {
       example,
     }) =>
       (n ?? 0) > 0
-        ? `${fmtCount(n)} ${pluralWord(n, "disease", "diseases")} directly associated with ${node} as well as ${pluralize(diff, "subclass", "subclasses")}${example ? ` such as ${q(example)}` : ""}`
+        ? `${fmtCount(n)} ${pluralWord(n, "disease", "diseases")} directly associated with phenotypic feature ${node} as well as ${pluralize(diff, "subclass", "subclasses")}${example ? ` such as ${q(example)}` : ""}`
         : `${fmtCount(all)} ${pluralWord(all, "disease", "diseases")} associated with ${node}`,
 
     "biolink:GeneToPhenotypicFeatureAssociation": ({

From b8f70dd53a6801a85311784488ee4ca4158bb29b Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Thu, 16 Oct 2025 13:42:45 -0400
Subject: [PATCH 18/18] clean up

---
 frontend/src/pages/node/SectionOverview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index ed27c982a..402b6cd04 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -141,7 +141,7 @@ const isDiseaseNode = computed(() => node.category === "biolink:Disease");
 const isPhenotypeNode = computed(
   () => node.category === "biolink:PhenotypicFeature",
 );
-console.log("node.category", node.category);
+
 const { otherMappings } = useClinicalResources(node);
 const CATEGORY_MAP: Record<string, string> = {
   "biolink:Disease": "disease",