From 24137ff9f30b473e8032dd05e8d6f06d655e2d1f Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Mon, 5 Aug 2024 09:42:05 -0700
Subject: [PATCH 01/27] Loop over all association categories for an initial
 pass at showing all association types on page load

---
 .../src/pages/node/SectionAssociations.vue    | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 9c1633ca..0fb26718 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -3,29 +3,31 @@
 -->
 
 <template>
-  <AppSection>
-    <AppHeading icon="arrows-left-right">Associations</AppHeading>
+<!-- show an AppSection for each category in categoryOptions  -->
+  <div v-for="category in categoryOptions" :key="category.id">
+    <AppSection>
+    <AppHeading icon="arrows-left-right">{{category.label}} Associations</AppHeading>
 
     <span v-if="!categoryOptions.length"
       >No associations with &nbsp;<AppNodeBadge :node="node" />
     </span>
 
     <!-- select -->
-    <AppFlex v-else gap="small">
-      <AppSelectSingle
-        v-model="category"
-        name="category"
-        :options="categoryOptions" />&nbsp;associations
-      involving&nbsp;<AppNodeBadge :node="node" /><AppSelectSingle
-        v-if="
-          node.node_hierarchy &&
-          node.node_hierarchy.sub_classes &&
-          node.node_hierarchy.sub_classes.length > 0
-        "
-        v-model="direct"
-        name="direct"
-        :options="directOptions"
-    /></AppFlex>
+<!--    <AppFlex v-else gap="small">-->
+<!--      <AppSelectSingle-->
+<!--        v-model="category"-->
+<!--        name="category"-->
+<!--        :options="categoryOptions" />&nbsp;associations-->
+<!--      involving&nbsp;<AppNodeBadge :node="node" /><AppSelectSingle-->
+<!--        v-if="-->
+<!--          node.node_hierarchy &&-->
+<!--          node.node_hierarchy.sub_classes &&-->
+<!--          node.node_hierarchy.sub_classes.length > 0-->
+<!--        "-->
+<!--        v-model="direct"-->
+<!--        name="direct"-->
+<!--        :options="directOptions"-->
+<!--    /></AppFlex>-->
 
     <AppFlex gap="small">
       <!--      <AppCheckbox v-model="direct" text="direct only" />-->
@@ -68,13 +70,13 @@
       />
     </template>
   </AppSection>
-
-  <!-- details viewer of association -->
-  <SectionAssociationDetails
+    <!-- details viewer of association -->
+    <SectionAssociationDetails
     v-if="association"
     :node="node"
     :association="association"
   />
+  </div>
 </template>
 
 <script setup lang="ts">

From 609191e27470d1bf70d758e0b67e1159b9eeb281 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Tue, 6 Aug 2024 12:23:36 -0700
Subject: [PATCH 02/27] small association heading tweak

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

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 0fb26718..ed011312 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -6,7 +6,7 @@
 <!-- show an AppSection for each category in categoryOptions  -->
   <div v-for="category in categoryOptions" :key="category.id">
     <AppSection>
-    <AppHeading icon="arrows-left-right">{{category.label}} Associations</AppHeading>
+    <AppHeading icon="arrows-left-right">{{category.label}}</AppHeading>
 
     <span v-if="!categoryOptions.length"
       >No associations with &nbsp;<AppNodeBadge :node="node" />

From 4ae405bfe6c4c59f659093d6da8cd605466b31d0 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Mon, 12 Aug 2024 12:58:02 -0700
Subject: [PATCH 03/27] Remove left alignment and scrollability of data tables
 (while messing up the info section above)

---
 frontend/src/components/AppSection.vue   | 6 ++++--
 frontend/src/components/AppTable.vue     | 4 ++--
 frontend/src/components/ThePhenogrid.vue | 2 +-
 frontend/src/global/styles.scss          | 6 +++---
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
index f3277497..6c984783 100644
--- a/frontend/src/components/AppSection.vue
+++ b/frontend/src/components/AppSection.vue
@@ -40,11 +40,13 @@ defineSlots<Slots>();
   }
 
   &.medium {
-    padding: 50px max(40px, calc((100% - $section) / 2));
+    padding: 50px 40px;
+    //padding: 50px max(40px, calc((100% - $section) / 2));
   }
 
   &.big {
-    padding: 50px max(40px, calc((100% - $section-big) / 2));
+    padding: 50px 40px;
+    //padding: 50px max(40px, calc((100% - $section-big) / 2));
   }
 
   &.normal {
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index cfc542b3..46fbf8a5 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -9,7 +9,7 @@
 <template>
   <!-- table data -->
   <AppFlex direction="col" :class="['container', { expanded }]">
-    <div ref="scroll" class="scroll force-scrollbar">
+    <div ref="scroll">
       <table
         class="table"
         :aria-colcount="cols.length"
@@ -420,7 +420,7 @@ watch(
 }
 
 .table {
-  margin: 0 auto;
+ //  margin: 0 auto;
   border-collapse: collapse;
   table-layout: fixed;
 }
diff --git a/frontend/src/components/ThePhenogrid.vue b/frontend/src/components/ThePhenogrid.vue
index 991331e4..eeb84e2f 100644
--- a/frontend/src/components/ThePhenogrid.vue
+++ b/frontend/src/components/ThePhenogrid.vue
@@ -18,7 +18,7 @@
       </template>
     </tooltip>
 
-    <div ref="scroll" class="scroll force-scrollbar">
+    <div ref="scroll">
       <svg
         ref="svg"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/global/styles.scss b/frontend/src/global/styles.scss
index 10cdfafc..572225b5 100644
--- a/frontend/src/global/styles.scss
+++ b/frontend/src/global/styles.scss
@@ -36,7 +36,7 @@ h1 {
   font-weight: 600;
   font-size: 1.5rem;
   letter-spacing: 1px;
-  text-align: center;
+  text-align: left;
   /** text-transform: uppercase; */
 }
 
@@ -46,7 +46,7 @@ h2 {
   padding: 10px 0;
   font-weight: 500;
   font-size: 1.3rem;
-  text-align: center;
+  text-align: left;
 }
 
 h3 {
@@ -56,7 +56,7 @@ h3 {
   padding: 10px 0;
   font-weight: 500;
   font-size: 1.1rem;
-  text-align: center;
+  text-align: left;
 }
 
 /** elements */

From 3510de3fb1fc08d274d0ded9c9abd5643c29e756 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Mon, 12 Aug 2024 21:33:08 -0700
Subject: [PATCH 04/27] alignment and padding tweaks

---
 frontend/src/components/AppSection.vue          | 16 ++++++++--------
 frontend/src/components/AppTable.vue            |  5 +++--
 frontend/src/pages/node/SectionAssociations.vue |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
index 6c984783..10ff59ad 100644
--- a/frontend/src/components/AppSection.vue
+++ b/frontend/src/components/AppSection.vue
@@ -30,23 +30,23 @@ defineSlots<Slots>();
 .section {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 40px;
-  text-align: center;
+  align-items: flex-start;
+  gap: 20px;
+  text-align: left;
   transition: background $fast;
 
   &.full {
-    padding: 50px 40px;
+    padding: 30px 20px;
   }
 
   &.medium {
-    padding: 50px 40px;
-    //padding: 50px max(40px, calc((100% - $section) / 2));
+    padding: 30px 20px;
+    //padding: 30px max(20px, calc((100% - $section) / 2));
   }
 
   &.big {
-    padding: 50px 40px;
-    //padding: 50px max(40px, calc((100% - $section-big) / 2));
+    padding: 30px 20px;
+    //padding: 30px max(20px, calc((100% - $section-big) / 2));
   }
 
   &.normal {
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index 46fbf8a5..ca9047c0 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -8,7 +8,7 @@
 
 <template>
   <!-- table data -->
-  <AppFlex direction="col" :class="['container', { expanded }]">
+  <AppFlex direction="col" align-h="left" :class="['container', { expanded }]">
     <div ref="scroll">
       <table
         class="table"
@@ -422,7 +422,8 @@ watch(
 .table {
  //  margin: 0 auto;
   border-collapse: collapse;
-  table-layout: fixed;
+  width: 100%;
+  //table-layout: fixed;
 }
 
 /** all cells */
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index ed011312..04d54aa2 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -6,7 +6,7 @@
 <!-- show an AppSection for each category in categoryOptions  -->
   <div v-for="category in categoryOptions" :key="category.id">
     <AppSection>
-    <AppHeading icon="arrows-left-right">{{category.label}}</AppHeading>
+    <AppHeading>{{category.label}}</AppHeading>
 
     <span v-if="!categoryOptions.length"
       >No associations with &nbsp;<AppNodeBadge :node="node" />

From b1b75e77bf9dd7e93cee679856c52cc688b4936f Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 13 Sep 2024 19:59:29 -0700
Subject: [PATCH 05/27] un-broke home page layout, floating data sections in
 drop shadow boxes

---
 frontend/src/components/AppHeading.vue        |   9 ++
 frontend/src/components/AppSection.vue        |  45 +++++-
 frontend/src/components/AppTable.vue          |  60 +++-----
 frontend/src/global/styles.scss               |   1 +
 .../src/pages/node/SectionAssociations.vue    | 141 +++++++++---------
 frontend/src/pages/node/SectionOverview.vue   |   2 +-
 .../src/pages/node/SectionVisualization.vue   |   2 +
 7 files changed, 139 insertions(+), 121 deletions(-)

diff --git a/frontend/src/components/AppHeading.vue b/frontend/src/components/AppHeading.vue
index b140d582..1b96d267 100644
--- a/frontend/src/components/AppHeading.vue
+++ b/frontend/src/components/AppHeading.vue
@@ -148,4 +148,13 @@ section.fill {
     }
   }
 }
+section.inset {
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 1px;
+    padding-bottom: 3px;
+    border-bottom: 2px solid $theme;
+  }
+}
 </style>
diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
index 10ff59ad..e8dc1225 100644
--- a/frontend/src/components/AppSection.vue
+++ b/frontend/src/components/AppSection.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-  <section :class="['section', width, design]">
+  <section :class="['section', width, design, alignment, { inset }]">
     <slot />
   </section>
 </template>
@@ -14,10 +14,17 @@ type Props = {
   /** width of section */
   width?: "full" | "medium" | "big";
   /** visual design */
-  design?: "normal" | "fill";
+  design?: "normal" | "fill" | "bare";
+  alignment?: "left" | "center";
+  inset?: boolean;
 };
 
-withDefaults(defineProps<Props>(), { width: "medium", design: "normal" });
+withDefaults(defineProps<Props>(), {
+  width: "medium",
+  design: "normal",
+  alignment: "center",
+  inset: false,
+});
 
 type Slots = {
   default: () => unknown;
@@ -30,18 +37,40 @@ defineSlots<Slots>();
 .section {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 20px;
-  text-align: left;
   transition: background $fast;
+  &.center {
+    align-items: center;
+    gap: 40px;
+    text-align: center;
+  }
+
+  &.left {
+    align-items: flex-start;
+    gap: 20px;
+    text-align: left;
+  }
 
   &.full {
     padding: 30px 20px;
   }
 
-  &.medium {
+  &.inset {
     padding: 30px 20px;
-    //padding: 30px max(20px, calc((100% - $section) / 2));
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  &.left {
+    margin: 10px 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  &.medium {
+    &.center {
+      padding: 30px max(20px, calc((100% - $section) / 2));
+    }
+    &.left {
+      padding: 5px 15px;
+    }
   }
 
   &.big {
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index ca9047c0..529d085a 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -183,13 +183,6 @@
           design="small"
           @click="emitDownload"
         />
-        <AppButton
-          v-tooltip="expanded ? 'Collapse table' : 'Expand table to full width'"
-          :text="expanded ? 'Collapse' : 'Expand'"
-          :icon="expanded ? 'minimize' : 'maximize'"
-          design="small"
-          @click="expanded = !expanded"
-        />
       </div>
     </div>
   </AppFlex>
@@ -227,8 +220,6 @@ export type Sort<Key extends string = string> = {
 
 <script setup lang="ts" generic="Datum extends object">
 import { computed, watch, type VNode } from "vue";
-import { useLocalStorage } from "@vueuse/core";
-import { useScrollable } from "@/composables/use-scrollable";
 import type { Options } from "./AppSelectMulti.vue";
 import AppSelectMulti from "./AppSelectMulti.vue";
 import AppSelectSingle from "./AppSelectSingle.vue";
@@ -306,13 +297,6 @@ defineSlots<{
   [slot in SlotNames]: (props: SlotProps) => VNode;
 }>();
 
-/** whether table is expanded to be full width */
-const expanded = useLocalStorage(`${props.id}-table-expanded`, false);
-
-/** style scroll states */
-const { ref: scroll, updateScroll } = useScrollable();
-watch(expanded, updateScroll);
-
 /** when user clicks to first page */
 function clickFirst() {
   emit("update:start", 0);
@@ -390,28 +374,18 @@ const ariaSort = computed(() => {
   if (props.sort?.direction === "down") return "descending";
   return "none";
 });
-
-/** close table of contents when expanding or starting expanded */
-watch(
-  expanded,
-  () => {
-    if (expanded.value) closeToc();
-  },
-  { immediate: true },
-);
 </script>
 
 <style lang="scss" scoped>
 .container {
-  &.expanded {
-    left: 0;
-    width: calc(100vw - 100px);
-    transform: translateX(0);
-
-    .cell {
-      width: max-content !important;
-    }
-  }
+  left: 0;
+  width: calc(100vw - 50px);
+  transform: translateX(0);
+  //width: 100%;
+  overflow-x: auto;
+  //.cell {
+  //  width: max-content !important;
+  //}
 }
 
 .scroll {
@@ -420,19 +394,20 @@ watch(
 }
 
 .table {
- //  margin: 0 auto;
-  border-collapse: collapse;
   width: 100%;
-  //table-layout: fixed;
+  //  margin: 0 auto;
+  border-collapse: collapse;
+  font-size: 0.9em;
+  table-layout: auto;
 }
 
 /** all cells */
 .cell {
-  display: flex;
-  align-items: center;
+  //display: flex;
+  //align-items: center;
   max-width: max-content;
-  padding: 5px 10px;
-  gap: 10px;
+  padding: 3px 6px;
+  gap: 5px;
 
   &.left {
     justify-content: flex-start;
@@ -457,6 +432,7 @@ watch(
 .th,
 .td {
   padding: 0;
+  white-space: nowrap;
 
   &.divider {
     position: relative;
@@ -473,7 +449,7 @@ watch(
 
 /** heading cells */
 .th {
-  padding-bottom: 10px;
+  padding-bottom: 3px;
   font-weight: 600;
   text-transform: capitalize;
 }
diff --git a/frontend/src/global/styles.scss b/frontend/src/global/styles.scss
index 572225b5..efe198df 100644
--- a/frontend/src/global/styles.scss
+++ b/frontend/src/global/styles.scss
@@ -25,6 +25,7 @@ main {
   flex-grow: 1;
   flex-direction: column;
   align-items: stretch;
+  background-color: #efefef;
 }
 
 /** headings */
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 04d54aa2..b2fad10a 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -3,79 +3,80 @@
 -->
 
 <template>
-<!-- show an AppSection for each category in categoryOptions  -->
+  <!-- show an AppSection for each category in categoryOptions  -->
   <div v-for="category in categoryOptions" :key="category.id">
-    <AppSection>
-    <AppHeading>{{category.label}}</AppHeading>
-
-    <span v-if="!categoryOptions.length"
-      >No associations with &nbsp;<AppNodeBadge :node="node" />
-    </span>
-
-    <!-- select -->
-<!--    <AppFlex v-else gap="small">-->
-<!--      <AppSelectSingle-->
-<!--        v-model="category"-->
-<!--        name="category"-->
-<!--        :options="categoryOptions" />&nbsp;associations-->
-<!--      involving&nbsp;<AppNodeBadge :node="node" /><AppSelectSingle-->
-<!--        v-if="-->
-<!--          node.node_hierarchy &&-->
-<!--          node.node_hierarchy.sub_classes &&-->
-<!--          node.node_hierarchy.sub_classes.length > 0-->
-<!--        "-->
-<!--        v-model="direct"-->
-<!--        name="direct"-->
-<!--        :options="directOptions"-->
-<!--    /></AppFlex>-->
-
-    <AppFlex gap="small">
-      <!--      <AppCheckbox v-model="direct" text="direct only" />-->
-
-      <AppCheckbox
-        v-if="
-          node.category === 'biolink:Gene' &&
-          category?.id.startsWith('biolink:GeneToPheno')
-        "
-        v-model="includeOrthologs"
-        v-tooltip="
-          'Include phenotypes for orthologous genes in the associations table'
-        "
-        text="Include ortholog phenotypes"
-      />
-      <AppButton
-        v-if="
-          (node.category === 'biolink:Disease' &&
-            category?.id.startsWith('biolink:DiseaseToPheno')) ||
-          (node.category === 'biolink:Gene' &&
-            category?.id.startsWith('biolink:GeneToPheno'))
-        "
-        v-tooltip="'Send these phenotypes to Phenotype Explorer for comparison'"
-        to="explore#phenotype-explorer"
-        :state="{ search: node.id }"
-        text="Phenotype Explorer"
-        icon="arrow-right"
-      />
-    </AppFlex>
-
-    <template v-if="category && direct">
-      <!-- table view of associations -->
-      <AssociationsTable
-        :node="node"
-        :category="category"
-        :association="association"
-        :include-orthologs="includeOrthologs"
-        :direct="direct"
-        @select="(value) => (association = value)"
-      />
-    </template>
-  </AppSection>
+    <AppSection alignment="left" class="inset">
+      <AppHeading level="3">{{ category.label }}</AppHeading>
+      <span v-if="!categoryOptions.length"
+        >No associations with &nbsp;<AppNodeBadge :node="node" />
+      </span>
+
+      <!-- select -->
+      <!--    <AppFlex v-else gap="small">-->
+      <!--      <AppSelectSingle-->
+      <!--        v-model="category"-->
+      <!--        name="category"-->
+      <!--        :options="categoryOptions" />&nbsp;associations-->
+      <!--      involving&nbsp;<AppNodeBadge :node="node" /><AppSelectSingle-->
+      <!--        v-if="-->
+      <!--          node.node_hierarchy &&-->
+      <!--          node.node_hierarchy.sub_classes &&-->
+      <!--          node.node_hierarchy.sub_classes.length > 0-->
+      <!--        "-->
+      <!--        v-model="direct"-->
+      <!--        name="direct"-->
+      <!--        :options="directOptions"-->
+      <!--    /></AppFlex>-->
+
+      <AppFlex gap="small">
+        <!--      <AppCheckbox v-model="direct" text="direct only" />-->
+
+        <AppCheckbox
+          v-if="
+            node.category === 'biolink:Gene' &&
+            category?.id.startsWith('biolink:GeneToPheno')
+          "
+          v-model="includeOrthologs"
+          v-tooltip="
+            'Include phenotypes for orthologous genes in the associations table'
+          "
+          text="Include ortholog phenotypes"
+        />
+        <AppButton
+          v-if="
+            (node.category === 'biolink:Disease' &&
+              category?.id.startsWith('biolink:DiseaseToPheno')) ||
+            (node.category === 'biolink:Gene' &&
+              category?.id.startsWith('biolink:GeneToPheno'))
+          "
+          v-tooltip="
+            'Send these phenotypes to Phenotype Explorer for comparison'
+          "
+          to="explore#phenotype-explorer"
+          :state="{ search: node.id }"
+          text="Phenotype Explorer"
+          icon="arrow-right"
+        />
+      </AppFlex>
+
+      <template v-if="category && direct">
+        <!-- table view of associations -->
+        <AssociationsTable
+          :node="node"
+          :category="category"
+          :association="association"
+          :include-orthologs="includeOrthologs"
+          :direct="direct"
+          @select="(value) => (association = value)"
+        />
+      </template>
+    </AppSection>
     <!-- details viewer of association -->
     <SectionAssociationDetails
-    v-if="association"
-    :node="node"
-    :association="association"
-  />
+      v-if="association"
+      :node="node"
+      :association="association"
+    />
   </div>
 </template>
 
diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index f9df0945..931c8120 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection>
+  <AppSection design="bare">
     <AppHeading icon="lightbulb">Overview</AppHeading>
 
     <AppDetails>
diff --git a/frontend/src/pages/node/SectionVisualization.vue b/frontend/src/pages/node/SectionVisualization.vue
index c33ed011..1a03b4ad 100644
--- a/frontend/src/pages/node/SectionVisualization.vue
+++ b/frontend/src/pages/node/SectionVisualization.vue
@@ -7,6 +7,8 @@
     v-if="
       node.category === 'biolink:Disease' || node.category === 'biolink:Gene'
     "
+    class="inset"
+    alignment="left"
   >
     <AppHeading icon="chart-bar">HistoPheno</AppHeading>
     <HistoPheno :node="node" />

From fdde3a17c0671fe5d5e1a15ad849ca0812627060 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 13 Sep 2024 20:07:21 -0700
Subject: [PATCH 06/27] make predicate arrows optional, leave them off by
 default

---
 frontend/src/components/AppPredicateBadge.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AppPredicateBadge.vue b/frontend/src/components/AppPredicateBadge.vue
index 83c6c135..64429be0 100644
--- a/frontend/src/components/AppPredicateBadge.vue
+++ b/frontend/src/components/AppPredicateBadge.vue
@@ -4,10 +4,10 @@
 
 <template>
   <span class="predicate">
-    <AppIcon class="arrow" :icon="`arrow-${arrowDirection}`" />
+    <AppIcon v-if="arrows" class="arrow" :icon="`arrow-${arrowDirection}`" />
     <span v-if="association.negated">NOT</span>
     {{ startCase(getCategoryLabel(association.predicate)).toLowerCase() }}
-    <AppIcon class="arrow" :icon="`arrow-${arrowDirection}`" />
+    <AppIcon v-if="arrows" class="arrow" :icon="`arrow-${arrowDirection}`" />
   </span>
 </template>
 
@@ -24,6 +24,7 @@ type Props = {
   reverse?: boolean;
   /** whether to display arrows vertically */
   vertical?: boolean;
+  arrows?: boolean;
 };
 
 const props = defineProps<Props>();

From d6e3dfd08a0f0e75a77fae7cd11b0267af4121bb Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 13 Sep 2024 20:46:58 -0700
Subject: [PATCH 07/27] progress on always visible table of contents

---
 frontend/src/components/AppSection.vue        |  6 +-
 frontend/src/components/AppTable.vue          |  2 +-
 .../src/components/TheTableOfContents.vue     | 57 +++++++++----------
 frontend/src/global/variables.scss            |  3 +
 .../src/pages/node/SectionAssociations.vue    |  2 +-
 frontend/src/pages/node/SectionOverview.vue   |  2 +-
 .../src/pages/node/SectionVisualization.vue   |  2 +-
 7 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
index e8dc1225..335326ca 100644
--- a/frontend/src/components/AppSection.vue
+++ b/frontend/src/components/AppSection.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-  <section :class="['section', width, design, alignment, { inset }]">
+  <section :class="['section', width, design, alignment, { inset }, { node }]">
     <slot />
   </section>
 </template>
@@ -17,6 +17,7 @@ type Props = {
   design?: "normal" | "fill" | "bare";
   alignment?: "left" | "center";
   inset?: boolean;
+  node?: boolean;
 };
 
 withDefaults(defineProps<Props>(), {
@@ -54,6 +55,9 @@ defineSlots<Slots>();
     padding: 30px 20px;
   }
 
+  &.node {
+    margin: 10px 20px 10px $toc-width + 10px !important;
+  }
   &.inset {
     padding: 30px 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index 529d085a..abb1aece 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -380,9 +380,9 @@ const ariaSort = computed(() => {
 .container {
   left: 0;
   width: calc(100vw - 50px);
-  transform: translateX(0);
   //width: 100%;
   overflow-x: auto;
+  transform: translateX(0);
   //.cell {
   //  width: max-content !important;
   //}
diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index 4e835c9e..e7a32758 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -29,32 +29,30 @@
         >
       </div>
 
-      <template v-if="expanded">
-        <div class="spacer"></div>
-
-        <!-- entries -->
-        <AppLink
-          v-for="(entry, index) in entries"
-          :key="index"
-          :to="'#' + entry.id"
-          :replace="true"
-          :class="['entry', { active: active === index }]"
-          :aria-current="active === index"
-          @click="active = index"
-        >
-          <AppIcon :icon="entry.icon" class="entry-icon" />
-          <span class="entry-text truncate">{{ entry.text }}</span>
-        </AppLink>
-
-        <div class="spacer"></div>
-
-        <!-- options -->
-        <AppCheckbox
-          v-model="oneAtATime"
-          v-tooltip="'Only show one section at a time'"
-          text="Show single section"
-        />
-      </template>
+      <div class="spacer"></div>
+
+      <!-- entries -->
+      <AppLink
+        v-for="(entry, index) in entries"
+        :key="index"
+        :to="'#' + entry.id"
+        :replace="true"
+        :class="['entry', { active: active === index }]"
+        :aria-current="active === index"
+        @click="active = index"
+      >
+        <AppIcon :icon="entry.icon" class="entry-icon" />
+        <span class="entry-text truncate">{{ entry.text }}</span>
+      </AppLink>
+
+      <div class="spacer"></div>
+
+      <!-- options -->
+      <AppCheckbox
+        v-model="oneAtATime"
+        v-tooltip="'Only show one section at a time'"
+        text="Show single section"
+      />
     </AppFlex>
   </aside>
 </template>
@@ -185,15 +183,12 @@ useMutationObserver(
   z-index: 1010;
   position: fixed;
   top: 0;
+  width: $toc-width;
+  max-width: calc(100vw - 40px);
   background: $white;
   box-shadow: $shadow;
 }
 
-.toc.expanded {
-  width: 210px;
-  max-width: calc(100vw - 40px);
-}
-
 .title {
   display: flex;
   align-items: center;
diff --git a/frontend/src/global/variables.scss b/frontend/src/global/variables.scss
index d0e70394..9b752565 100644
--- a/frontend/src/global/variables.scss
+++ b/frontend/src/global/variables.scss
@@ -30,3 +30,6 @@ $section-big: 1200px;
 $rounded: 5px;
 $outline: 0 0 0 2px $theme;
 $shadow: 0 2px 4px #00000030;
+
+/* table of contents width */
+$toc-width: 210px;
\ No newline at end of file
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index b2fad10a..6bc90129 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -5,7 +5,7 @@
 <template>
   <!-- show an AppSection for each category in categoryOptions  -->
   <div v-for="category in categoryOptions" :key="category.id">
-    <AppSection alignment="left" class="inset">
+    <AppSection alignment="left" class="inset node">
       <AppHeading level="3">{{ category.label }}</AppHeading>
       <span v-if="!categoryOptions.length"
         >No associations with &nbsp;<AppNodeBadge :node="node" />
diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index 931c8120..abe9ded3 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection design="bare">
+  <AppSection design="bare" class="node">
     <AppHeading icon="lightbulb">Overview</AppHeading>
 
     <AppDetails>
diff --git a/frontend/src/pages/node/SectionVisualization.vue b/frontend/src/pages/node/SectionVisualization.vue
index 1a03b4ad..a42e4dfa 100644
--- a/frontend/src/pages/node/SectionVisualization.vue
+++ b/frontend/src/pages/node/SectionVisualization.vue
@@ -7,7 +7,7 @@
     v-if="
       node.category === 'biolink:Disease' || node.category === 'biolink:Gene'
     "
-    class="inset"
+    class="inset node"
     alignment="left"
   >
     <AppHeading icon="chart-bar">HistoPheno</AppHeading>

From 85f5967ab0bd34f60a91f7c3df9db237e3bf2cc8 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Sat, 14 Sep 2024 18:43:15 -0700
Subject: [PATCH 08/27] table of contents full height, remove top controls

---
 .../src/components/TheTableOfContents.vue     | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index e7a32758..2db85f53 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -6,30 +6,13 @@
       direction="col"
       gap="none"
       align-h="stretch"
+      align-v="top"
       :class="['toc', { expanded }]"
       :style="{ top: nudge + 'px' }"
       role="doc-toc"
       aria-label="Page table of contents"
       @click.stop
     >
-      <!-- toggle button -->
-      <div class="title">
-        <button
-          v-tooltip="
-            expanded ? 'Close table of contents' : 'Expand table of contents'
-          "
-          class="title-button"
-          :aria-expanded="expanded"
-          @click="expanded = !expanded"
-        >
-          <AppIcon :icon="expanded ? 'xmark' : 'bars'" />
-        </button>
-        <span v-if="expanded" class="title-text truncate"
-          >Table of Contents</span
-        >
-      </div>
-
-      <div class="spacer"></div>
 
       <!-- entries -->
       <AppLink
@@ -184,6 +167,7 @@ useMutationObserver(
   position: fixed;
   top: 0;
   width: $toc-width;
+  height: 100%;
   max-width: calc(100vw - 40px);
   background: $white;
   box-shadow: $shadow;

From 640dd96bc203d1d7b1137f01c031c912f47789f7 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Sat, 14 Sep 2024 19:10:25 -0700
Subject: [PATCH 09/27] tidying of other node page sections

---
 frontend/src/components/AppPredicateBadge.vue |  2 --
 frontend/src/components/AppSection.vue        |  1 -
 frontend/src/components/AppTable.vue          | 24 +++++++++++++++----
 .../src/components/TheTableOfContents.vue     |  3 +--
 frontend/src/global/variables.scss            |  2 +-
 frontend/src/pages/node/AssociationsTable.vue |  2 --
 .../src/pages/node/SectionBreadcrumbs.vue     |  2 +-
 frontend/src/pages/node/SectionExtra.vue      |  2 +-
 frontend/src/pages/node/SectionHierarchy.vue  |  6 ++++-
 frontend/src/pages/node/SectionOverview.vue   |  2 +-
 10 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/AppPredicateBadge.vue b/frontend/src/components/AppPredicateBadge.vue
index 64429be0..8c5e4d0e 100644
--- a/frontend/src/components/AppPredicateBadge.vue
+++ b/frontend/src/components/AppPredicateBadge.vue
@@ -43,8 +43,6 @@ const arrowDirection = computed(() =>
 
 <style lang="scss" scoped>
 .predicate {
-  white-space: nowrap;
-
   & > * {
     white-space: normal;
     overflow-wrap: anywhere;
diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
index 335326ca..49f9857d 100644
--- a/frontend/src/components/AppSection.vue
+++ b/frontend/src/components/AppSection.vue
@@ -65,7 +65,6 @@ defineSlots<Slots>();
 
   &.left {
     margin: 10px 20px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
 
   &.medium {
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index abb1aece..65d93f13 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -9,7 +9,7 @@
 <template>
   <!-- table data -->
   <AppFlex direction="col" align-h="left" :class="['container', { expanded }]">
-    <div ref="scroll">
+    <div ref="scroll" style="width: 100%">
       <table
         class="table"
         :aria-colcount="cols.length"
@@ -379,8 +379,8 @@ const ariaSort = computed(() => {
 <style lang="scss" scoped>
 .container {
   left: 0;
-  width: calc(100vw - 50px);
-  //width: 100%;
+  //width: calc(100vw - 50px);
+  width: 100%;
   overflow-x: auto;
   transform: translateX(0);
   //.cell {
@@ -398,6 +398,7 @@ const ariaSort = computed(() => {
   //  margin: 0 auto;
   border-collapse: collapse;
   font-size: 0.9em;
+  //table-layout: fixed;
   table-layout: auto;
 }
 
@@ -405,7 +406,7 @@ const ariaSort = computed(() => {
 .cell {
   //display: flex;
   //align-items: center;
-  max-width: max-content;
+  //max-width: max-content;
   padding: 3px 6px;
   gap: 5px;
 
@@ -454,6 +455,21 @@ 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;
diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index 2db85f53..5166bcc8 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -13,7 +13,6 @@
       aria-label="Page table of contents"
       @click.stop
     >
-
       <!-- entries -->
       <AppLink
         v-for="(entry, index) in entries"
@@ -167,8 +166,8 @@ useMutationObserver(
   position: fixed;
   top: 0;
   width: $toc-width;
-  height: 100%;
   max-width: calc(100vw - 40px);
+  height: 100%;
   background: $white;
   box-shadow: $shadow;
 }
diff --git a/frontend/src/global/variables.scss b/frontend/src/global/variables.scss
index 9b752565..09ccf4f8 100644
--- a/frontend/src/global/variables.scss
+++ b/frontend/src/global/variables.scss
@@ -32,4 +32,4 @@ $outline: 0 0 0 2px $theme;
 $shadow: 0 2px 4px #00000030;
 
 /* table of contents width */
-$toc-width: 210px;
\ No newline at end of file
+$toc-width: 210px;
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 60210161..f91a2616 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -163,7 +163,6 @@ const cols = computed((): Cols<Datum> => {
       heading: getCategoryLabel(
         associations.value.items[0]?.subject_category || "Subject",
       ),
-      width: "200px",
       sortable: true,
     },
     {
@@ -178,7 +177,6 @@ const cols = computed((): Cols<Datum> => {
       heading: getCategoryLabel(
         associations.value.items[0]?.object_category || "Object",
       ),
-      width: "200px",
       sortable: true,
     },
     {
diff --git a/frontend/src/pages/node/SectionBreadcrumbs.vue b/frontend/src/pages/node/SectionBreadcrumbs.vue
index 9db3e98b..0d74fad7 100644
--- a/frontend/src/pages/node/SectionBreadcrumbs.vue
+++ b/frontend/src/pages/node/SectionBreadcrumbs.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection>
+  <AppSection alignment="left" class="node">
     <AppHeading icon="location-dot">Breadcrumbs</AppHeading>
 
     <template v-if="breadcrumbs.length">
diff --git a/frontend/src/pages/node/SectionExtra.vue b/frontend/src/pages/node/SectionExtra.vue
index 5f108071..93588dae 100644
--- a/frontend/src/pages/node/SectionExtra.vue
+++ b/frontend/src/pages/node/SectionExtra.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection>
+  <AppSection alignment="left" class="node inset">
     <AppHeading icon="clipboard-list">Extra Info</AppHeading>
 
     <AppDetails>
diff --git a/frontend/src/pages/node/SectionHierarchy.vue b/frontend/src/pages/node/SectionHierarchy.vue
index 96d6a7ef..7f1174e3 100644
--- a/frontend/src/pages/node/SectionHierarchy.vue
+++ b/frontend/src/pages/node/SectionHierarchy.vue
@@ -3,7 +3,11 @@
 -->
 
 <template>
-  <AppSection v-if="node.category !== 'biolink:Gene'">
+  <AppSection
+    v-if="node.category !== 'biolink:Gene'"
+    alignment="left"
+    class="node inset"
+  >
     <AppHeading icon="sitemap">Hierarchy</AppHeading>
 
     <AppDetails>
diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index abe9ded3..0a4d92d2 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection design="bare" class="node">
+  <AppSection design="bare" alignment="left" class="node">
     <AppHeading icon="lightbulb">Overview</AppHeading>
 
     <AppDetails>

From 6dfef07a67237bcb3d853a905f40672c61d44cc3 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Sat, 14 Sep 2024 19:17:15 -0700
Subject: [PATCH 10/27] some title & overview changes, get TOC up to the header

---
 frontend/src/components/TheTableOfContents.vue | 5 +----
 frontend/src/pages/node/PageNode.vue           | 2 +-
 frontend/src/pages/node/SectionTitle.vue       | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index 5166bcc8..578a59d4 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -93,10 +93,7 @@ async function updatePosition() {
   const subHeader = subHeaderEl.getBoundingClientRect();
 
   /** calculate nudge */
-  nudge.value = Math.max(
-    header.top + header.height,
-    subHeader.top + subHeader.height,
-  );
+  nudge.value = Math.max(header.top + header.height);
 
   /** find in view section */
   if (!oneAtATime.value)
diff --git a/frontend/src/pages/node/PageNode.vue b/frontend/src/pages/node/PageNode.vue
index 29f072e0..5b1be23e 100644
--- a/frontend/src/pages/node/PageNode.vue
+++ b/frontend/src/pages/node/PageNode.vue
@@ -5,7 +5,7 @@
 <template>
   <!-- status -->
   <template v-if="isLoading || isError">
-    <AppSection design="fill" class="section">
+    <AppSection design="fill" class="bare node">
       <AppHeading class="heading">
         {{ $route.params.id }}
       </AppHeading>
diff --git a/frontend/src/pages/node/SectionTitle.vue b/frontend/src/pages/node/SectionTitle.vue
index 9a02c7aa..0dbce8bf 100644
--- a/frontend/src/pages/node/SectionTitle.vue
+++ b/frontend/src/pages/node/SectionTitle.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection design="fill" class="section">
+  <AppSection design="bare" alignment="left" class="section node">
     <AppFlex dir="column">
       <AppHeading class="heading" :icon="getCategoryIcon(node.category)">
         <span

From 353adfa627d9da496cf90e66423828e646548b3e Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Sat, 14 Sep 2024 19:18:18 -0700
Subject: [PATCH 11/27] unused var cleanup

---
 frontend/src/components/TheTableOfContents.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index 578a59d4..29032044 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -90,7 +90,6 @@ async function updatePosition() {
   const subHeaderEl = document.querySelector("main > section:first-child");
   if (!headerEl || !subHeaderEl) return;
   const header = headerEl.getBoundingClientRect();
-  const subHeader = subHeaderEl.getBoundingClientRect();
 
   /** calculate nudge */
   nudge.value = Math.max(header.top + header.height);

From 199d80986a7a9d2aa9850f2ab86741a2badc5863 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Wed, 25 Sep 2024 11:25:05 -0700
Subject: [PATCH 12/27] An attempt to get association details to work as a
 modal

---
 frontend/src/components/AppTable.vue          |  2 +-
 frontend/src/pages/node/AssociationsTable.vue | 25 ++++++++++++++---
 .../src/pages/node/SectionAssociations.vue    | 27 +++----------------
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index 65d93f13..544517e2 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -8,7 +8,7 @@
 
 <template>
   <!-- table data -->
-  <AppFlex direction="col" align-h="left" :class="['container', { expanded }]">
+  <AppFlex direction="col" align-h="left" :class="['container']">
     <div ref="scroll" style="width: 100%">
       <table
         class="table"
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index f91a2616..55e09ce8 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -76,10 +76,11 @@
         class="details"
         :text="String(cell || 0)"
         :aria-pressed="row.id === association?.id"
-        :icon="row.id === association?.id ? 'check' : 'flask'"
+        :icon="row.id === association?.id ? 'check' : 'newspaper'"
         :color="row.id === association?.id ? 'primary' : 'secondary'"
         @click="emit('select', row.id === association?.id ? undefined : row)"
       />
+      <!--        @click="emit('select', row.id === association?.id ? undefined : row)"-->
     </template>
 
     <!-- extra columns -->
@@ -99,6 +100,10 @@
     <!-- publication specific -->
     <!-- no template needed because info just plain text -->
   </AppTable>
+  <AppModal v-model="showModal" label="Association Details">
+    <SectionAssociationDetails :node="node" />
+    <!-- :association="association" -->
+  </AppModal>
 </template>
 
 <script setup lang="ts">
@@ -117,12 +122,14 @@ import {
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppPercentage from "@/components/AppPercentage.vue";
 import AppPredicateBadge from "@/components/AppPredicateBadge.vue";
+import AppModal from "@/components/AppModal.vue";
 import type { Option } from "@/components/AppSelectSingle.vue";
 import AppTable from "@/components/AppTable.vue";
 import type { Cols, Sort } from "@/components/AppTable.vue";
 import { snackbar } from "@/components/TheSnackbar.vue";
 import { useQuery } from "@/composables/use-query";
 import { getBreadcrumbs } from "@/pages/node/AssociationsSummary.vue";
+import SectionAssociationDetails from "@/pages/node/SectionAssociationDetails.vue";
 
 type Props = {
   /** current node */
@@ -132,12 +139,13 @@ type Props = {
   /** include orthologs */
   includeOrthologs: boolean;
   direct: Option;
-  /** selected association */
-  association?: DirectionalAssociation;
 };
 
 const props = defineProps<Props>();
 
+const showModal = ref(false);
+const association: DirectionalAssociation = ref(false);
+
 type Emits = {
   /** change selected association */
   select: [value?: DirectionalAssociation];
@@ -145,6 +153,16 @@ type Emits = {
 
 const emit = defineEmits<Emits>();
 
+emit("select", (value) => {
+  if (value) {
+    alert(value);
+    console.log("emitting association detail event");
+    console.log(value);
+    association.value = value;
+    showModal.value = true;
+  }
+});
+
 /** table state */
 const sort = ref<Sort>();
 const perPage = ref(5);
@@ -202,7 +220,6 @@ const cols = computed((): Cols<Datum> => {
       heading: "Taxon",
     });
 
-  console.log(props);
   /** phenotype specific columns */
   if (props.category.id.includes("PhenotypicFeature")) {
     extraCols.push(
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 6bc90129..6c0ae52b 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -5,31 +5,15 @@
 <template>
   <!-- show an AppSection for each category in categoryOptions  -->
   <div v-for="category in categoryOptions" :key="category.id">
+    <!-- Association table -->
     <AppSection alignment="left" class="inset node">
-      <AppHeading level="3">{{ category.label }}</AppHeading>
+      <AppHeading :level="3">{{ category.label }}</AppHeading>
       <span v-if="!categoryOptions.length"
         >No associations with &nbsp;<AppNodeBadge :node="node" />
       </span>
 
-      <!-- select -->
-      <!--    <AppFlex v-else gap="small">-->
-      <!--      <AppSelectSingle-->
-      <!--        v-model="category"-->
-      <!--        name="category"-->
-      <!--        :options="categoryOptions" />&nbsp;associations-->
-      <!--      involving&nbsp;<AppNodeBadge :node="node" /><AppSelectSingle-->
-      <!--        v-if="-->
-      <!--          node.node_hierarchy &&-->
-      <!--          node.node_hierarchy.sub_classes &&-->
-      <!--          node.node_hierarchy.sub_classes.length > 0-->
-      <!--        "-->
-      <!--        v-model="direct"-->
-      <!--        name="direct"-->
-      <!--        :options="directOptions"-->
-      <!--    /></AppFlex>-->
 
       <AppFlex gap="small">
-        <!--      <AppCheckbox v-model="direct" text="direct only" />-->
 
         <AppCheckbox
           v-if="
@@ -72,11 +56,6 @@
       </template>
     </AppSection>
     <!-- details viewer of association -->
-    <SectionAssociationDetails
-      v-if="association"
-      :node="node"
-      :association="association"
-    />
   </div>
 </template>
 
@@ -88,7 +67,6 @@ import type { DirectionalAssociation, Node } from "@/api/model";
 import AppCheckbox from "@/components/AppCheckbox.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import type { Option, Options } from "@/components/AppSelectSingle.vue";
-import AppSelectSingle from "@/components/AppSelectSingle.vue";
 import AssociationsTable from "@/pages/node/AssociationsTable.vue";
 import SectionAssociationDetails from "@/pages/node/SectionAssociationDetails.vue";
 
@@ -107,6 +85,7 @@ const props = defineProps<Props>();
 const category = ref<Option>();
 /** selected association id */
 const association = ref<DirectionalAssociation>();
+
 /** include orthologous genes in association table */
 const includeOrthologs = ref(false);
 const direct = ref<Option>();

From e0993830c66ba4525c94de0f5ff4e898434bd916 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 27 Sep 2024 09:15:07 -0700
Subject: [PATCH 13/27] back to attempting to pass the selected association to
 the association details section within a modal

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

diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 55e09ce8..08e15077 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -101,8 +101,7 @@
     <!-- no template needed because info just plain text -->
   </AppTable>
   <AppModal v-model="showModal" label="Association Details">
-    <SectionAssociationDetails :node="node" />
-    <!-- :association="association" -->
+    <SectionAssociationDetails :node="node" :association="association" />
   </AppModal>
 </template>
 

From 9310be630e747a3643ac8d874e7dabefd392efc3 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 27 Sep 2024 10:16:52 -0700
Subject: [PATCH 14/27] remove modal temporarily to simplify debugging

---
 frontend/src/pages/node/AssociationsTable.vue         | 7 +++----
 frontend/src/pages/node/SectionAssociationDetails.vue | 4 +++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 08e15077..ff348f4f 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -100,9 +100,9 @@
     <!-- publication specific -->
     <!-- no template needed because info just plain text -->
   </AppTable>
-  <AppModal v-model="showModal" label="Association Details">
-    <SectionAssociationDetails :node="node" :association="association" />
-  </AppModal>
+<!--  <AppModal v-model="showModal" label="Association Details">-->
+  <SectionAssociationDetails :node="node" :association="association" />
+<!--  </AppModal>-->
 </template>
 
 <script setup lang="ts">
@@ -154,7 +154,6 @@ const emit = defineEmits<Emits>();
 
 emit("select", (value) => {
   if (value) {
-    alert(value);
     console.log("emitting association detail event");
     console.log(value);
     association.value = value;
diff --git a/frontend/src/pages/node/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index bf24286b..6f4fad5e 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -4,7 +4,8 @@
 -->
 
 <template>
-  <AppSection>
+  <div>
+    <AppSection>
     <AppHeading icon="flask">Association Details</AppHeading>
 
     <div>
@@ -76,6 +77,7 @@
       </AppDetail>
     </AppDetails>
   </AppSection>
+  </div>
 </template>
 
 <script setup lang="ts">

From a88846bdbb1943c1595a7ceaa242eff3f36e9296 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 27 Sep 2024 14:03:40 -0700
Subject: [PATCH 15/27] finally opening and closing the details modal

---
 frontend/src/pages/node/AssociationsTable.vue | 53 +++++++++++++------
 .../pages/node/SectionAssociationDetails.vue  |  6 +--
 .../src/pages/node/SectionAssociations.vue    |  2 +-
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index ff348f4f..49a3b765 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -66,19 +66,24 @@
     </template>
 
     <!-- button to show details -->
-    <template #details="{ cell, row }">
+    <template #details="{ row }">
+<!--      <AppButton-->
+<!--        v-tooltip="-->
+<!--          row.id === association?.id-->
+<!--            ? `Show evidence (${row.evidence_count}) and other info about this association`-->
+<!--            : 'Deselect this association'-->
+<!--        "-->
+<!--        class="details"-->
+<!--        :text="String(cell || 0)"-->
+<!--        :aria-pressed="row.id === association?.id"-->
+<!--        :icon="row.id === association?.id ? 'check' : 'newspaper'"-->
+<!--        :color="row.id === association?.id ? 'primary' : 'secondary'"-->
+<!--        @click="emit('select', row.id === association?.id ? undefined : row)"-->
+<!--      />-->
       <AppButton
-        v-tooltip="
-          row.id === association?.id
-            ? `Show evidence (${row.evidence_count}) and other info about this association`
-            : 'Deselect this association'
-        "
-        class="details"
-        :text="String(cell || 0)"
-        :aria-pressed="row.id === association?.id"
-        :icon="row.id === association?.id ? 'check' : 'newspaper'"
-        :color="row.id === association?.id ? 'primary' : 'secondary'"
-        @click="emit('select', row.id === association?.id ? undefined : row)"
+        text="Details"
+        icon="info-circle"
+        @click="openModal(row)"
       />
       <!--        @click="emit('select', row.id === association?.id ? undefined : row)"-->
     </template>
@@ -100,9 +105,12 @@
     <!-- publication specific -->
     <!-- no template needed because info just plain text -->
   </AppTable>
-<!--  <AppModal v-model="showModal" label="Association Details">-->
-  <SectionAssociationDetails :node="node" :association="association" />
-<!--  </AppModal>-->
+  <AppModal v-model="showModal" label="Association Details">
+    <SectionAssociationDetails
+      :node="node"
+      :association="selectedAssociation"
+    />
+  </AppModal>
 </template>
 
 <script setup lang="ts">
@@ -137,13 +145,26 @@ type Props = {
   category: Option;
   /** include orthologs */
   includeOrthologs: boolean;
+  /** selected association */
+  association?: DirectionalAssociation;
   direct: Option;
 };
 
 const props = defineProps<Props>();
 
 const showModal = ref(false);
-const association: DirectionalAssociation = ref(false);
+const selectedAssociation = ref<DirectionalAssociation | null>(null);
+
+function openModal(association: DirectionalAssociation) {
+  selectedAssociation.value = association;
+  showModal.value = true;
+}
+
+watch(showModal, (newValue) => {
+  if (!newValue) {
+    selectedAssociation.value = null;
+  }
+});
 
 type Emits = {
   /** change selected association */
diff --git a/frontend/src/pages/node/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index 6f4fad5e..7671a0e0 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -4,8 +4,7 @@
 -->
 
 <template>
-  <div>
-    <AppSection>
+  <AppSection v-if="association">
     <AppHeading icon="flask">Association Details</AppHeading>
 
     <div>
@@ -77,7 +76,6 @@
       </AppDetail>
     </AppDetails>
   </AppSection>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -93,7 +91,7 @@ type Props = {
   /** current node */
   node: Node;
   /** selected association */
-  association: DirectionalAssociation;
+  association?: DirectionalAssociation;
 };
 
 const props = defineProps<Props>();
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 6c0ae52b..b0572e4e 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -68,7 +68,6 @@ import AppCheckbox from "@/components/AppCheckbox.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import type { Option, Options } from "@/components/AppSelectSingle.vue";
 import AssociationsTable from "@/pages/node/AssociationsTable.vue";
-import SectionAssociationDetails from "@/pages/node/SectionAssociationDetails.vue";
 
 /** route info */
 const route = useRoute();
@@ -106,6 +105,7 @@ const directOptions = computed(
     { id: "true", label: "directly" },
   ],
 );
+
 /** deselect association when selected category changes */
 watch(category, () => (association.value = undefined));
 

From f0cf348a14bd812670c3cf438d20f10ee48f60c8 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 27 Sep 2024 14:08:38 -0700
Subject: [PATCH 16/27] simplified passing association all over, just using
 selectedAssociation now

---
 frontend/src/pages/node/AssociationsTable.vue | 32 +++++++++----------
 .../src/pages/node/SectionAssociations.vue    |  6 +---
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 49a3b765..53e32cf7 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -145,8 +145,6 @@ type Props = {
   category: Option;
   /** include orthologs */
   includeOrthologs: boolean;
-  /** selected association */
-  association?: DirectionalAssociation;
   direct: Option;
 };
 
@@ -166,21 +164,21 @@ watch(showModal, (newValue) => {
   }
 });
 
-type Emits = {
-  /** change selected association */
-  select: [value?: DirectionalAssociation];
-};
-
-const emit = defineEmits<Emits>();
-
-emit("select", (value) => {
-  if (value) {
-    console.log("emitting association detail event");
-    console.log(value);
-    association.value = value;
-    showModal.value = true;
-  }
-});
+// type Emits = {
+//   /** change selected association */
+//   select: [value?: DirectionalAssociation];
+// };
+//
+// const emit = defineEmits<Emits>();
+//
+// emit("select", (value) => {
+//   if (value) {
+//     console.log("emitting association detail event");
+//     console.log(value);
+//     association.value = value;
+//     showModal.value = true;
+//   }
+// });
 
 /** table state */
 const sort = ref<Sort>();
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index b0572e4e..debe24ef 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -48,10 +48,8 @@
         <AssociationsTable
           :node="node"
           :category="category"
-          :association="association"
           :include-orthologs="includeOrthologs"
           :direct="direct"
-          @select="(value) => (association = value)"
         />
       </template>
     </AppSection>
@@ -63,7 +61,7 @@
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { startCase } from "lodash";
-import type { DirectionalAssociation, Node } from "@/api/model";
+import type { Node } from "@/api/model";
 import AppCheckbox from "@/components/AppCheckbox.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import type { Option, Options } from "@/components/AppSelectSingle.vue";
@@ -82,8 +80,6 @@ const props = defineProps<Props>();
 
 /** selected category of associations to show */
 const category = ref<Option>();
-/** selected association id */
-const association = ref<DirectionalAssociation>();
 
 /** include orthologous genes in association table */
 const includeOrthologs = ref(false);

From 0d5c71afc1efc602efcd72c4ca24262f55079db3 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 27 Sep 2024 18:22:45 -0700
Subject: [PATCH 17/27] layout tweaks

---
 frontend/src/components/AppSection.vue        |  2 +-
 .../src/components/TheTableOfContents.vue     |  3 ++-
 frontend/src/global/variables.scss            |  1 +
 .../pages/node/SectionAssociationDetails.vue  |  6 +----
 frontend/src/pages/node/SectionOverview.vue   |  2 --
 frontend/src/pages/node/SectionTitle.vue      | 22 ++++++++++---------
 6 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
index 49f9857d..cfb78c62 100644
--- a/frontend/src/components/AppSection.vue
+++ b/frontend/src/components/AppSection.vue
@@ -56,7 +56,7 @@ defineSlots<Slots>();
   }
 
   &.node {
-    margin: 10px 20px 10px $toc-width + 10px !important;
+    margin: 10px 20px 10px $toc-width + 20px !important;
   }
   &.inset {
     padding: 30px 20px;
diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index 29032044..da4dce95 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -158,7 +158,8 @@ useMutationObserver(
 
 <style lang="scss" scoped>
 .toc {
-  z-index: 1010;
+  /* this is an unfortunate hack to get the TOC to be behind the footer */
+  z-index: 1009;
   position: fixed;
   top: 0;
   width: $toc-width;
diff --git a/frontend/src/global/variables.scss b/frontend/src/global/variables.scss
index 09ccf4f8..270ee4c1 100644
--- a/frontend/src/global/variables.scss
+++ b/frontend/src/global/variables.scss
@@ -33,3 +33,4 @@ $shadow: 0 2px 4px #00000030;
 
 /* table of contents width */
 $toc-width: 210px;
+
diff --git a/frontend/src/pages/node/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index 7671a0e0..3fe497e7 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -5,11 +5,9 @@
 
 <template>
   <AppSection v-if="association">
-    <AppHeading icon="flask">Association Details</AppHeading>
+    <h2>Association Details</h2>
 
     <div>
-      Details for the selected association... <br />
-
       <div class="selected">
         <AppNodeBadge
           :node="{
@@ -34,7 +32,6 @@
     <AppDetails>
       <AppDetail
         title="Evidence Codes"
-        :count="association.evidence_count"
         icon="flask"
         :full="true"
       >
@@ -60,7 +57,6 @@
 
       <AppDetail
         title="Publications"
-        :count="association.publications?.length"
         icon="book"
         :full="true"
       >
diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
index 0a4d92d2..92162ed2 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -4,8 +4,6 @@
 
 <template>
   <AppSection design="bare" alignment="left" class="node">
-    <AppHeading icon="lightbulb">Overview</AppHeading>
-
     <AppDetails>
       <!-- symbol (gene specific) -->
       <AppDetail
diff --git a/frontend/src/pages/node/SectionTitle.vue b/frontend/src/pages/node/SectionTitle.vue
index 0dbce8bf..eb638ee4 100644
--- a/frontend/src/pages/node/SectionTitle.vue
+++ b/frontend/src/pages/node/SectionTitle.vue
@@ -5,16 +5,7 @@
 <template>
   <AppSection design="bare" alignment="left" class="section node">
     <AppFlex dir="column">
-      <AppHeading class="heading" :icon="getCategoryIcon(node.category)">
-        <span
-          :style="{ textDecoration: node.deprecated ? 'line-through' : '' }"
-          v-html="node.name"
-        >
-        </span>
-        <template v-if="node.deprecated"> (OBSOLETE)</template>
-      </AppHeading>
-
-      <AppFlex>
+      <AppFlex align-h="right">
         <span>
           {{ getCategoryLabel(node.category) }}
         </span>
@@ -28,6 +19,17 @@
         />
       </AppFlex>
 
+      <AppHeading class="heading" :icon="getCategoryIcon(node.category)">
+        <span
+          :style="{ textDecoration: node.deprecated ? 'line-through' : '' }"
+          v-html="node.name"
+        >
+        </span>
+        <template v-if="node.deprecated"> (OBSOLETE)</template>
+      </AppHeading>
+
+
+
       <AppButton
         v-if="fromSearch"
         icon="arrow-left"

From 1743b3987414301d9b0b7343d58560c5b6d3db46 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 27 Sep 2024 18:25:22 -0700
Subject: [PATCH 18/27] update AppFlex dir vs direction to fix a linting error

---
 frontend/src/pages/node/SectionTitle.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/pages/node/SectionTitle.vue b/frontend/src/pages/node/SectionTitle.vue
index eb638ee4..4a67800f 100644
--- a/frontend/src/pages/node/SectionTitle.vue
+++ b/frontend/src/pages/node/SectionTitle.vue
@@ -4,7 +4,7 @@
 
 <template>
   <AppSection design="bare" alignment="left" class="section node">
-    <AppFlex dir="column">
+    <AppFlex direction="col">
       <AppFlex align-h="right">
         <span>
           {{ getCategoryLabel(node.category) }}
@@ -28,8 +28,6 @@
         <template v-if="node.deprecated"> (OBSOLETE)</template>
       </AppHeading>
 
-
-
       <AppButton
         v-if="fromSearch"
         icon="arrow-left"

From 7cc43e097c0daf0f94ecd9daab0ac7ec3cb5ecda Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Mon, 30 Sep 2024 17:16:29 -0700
Subject: [PATCH 19/27] formatting, cruft removal

---
 frontend/src/global/variables.scss            |  1 -
 frontend/src/pages/node/AssociationsTable.vue | 24 +++----------------
 .../pages/node/SectionAssociationDetails.vue  | 12 ++--------
 .../src/pages/node/SectionAssociations.vue    |  5 ----
 4 files changed, 5 insertions(+), 37 deletions(-)

diff --git a/frontend/src/global/variables.scss b/frontend/src/global/variables.scss
index 270ee4c1..09ccf4f8 100644
--- a/frontend/src/global/variables.scss
+++ b/frontend/src/global/variables.scss
@@ -33,4 +33,3 @@ $shadow: 0 2px 4px #00000030;
 
 /* table of contents width */
 $toc-width: 210px;
-
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index d7a0f827..4aec3947 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -67,25 +67,7 @@
 
     <!-- button to show details -->
     <template #details="{ row }">
-<!--      <AppButton-->
-<!--        v-tooltip="-->
-<!--          row.id === association?.id-->
-<!--            ? `Show evidence (${row.evidence_count}) and other info about this association`-->
-<!--            : 'Deselect this association'-->
-<!--        "-->
-<!--        class="details"-->
-<!--        :text="String(cell || 0)"-->
-<!--        :aria-pressed="row.id === association?.id"-->
-<!--        :icon="row.id === association?.id ? 'check' : 'newspaper'"-->
-<!--        :color="row.id === association?.id ? 'primary' : 'secondary'"-->
-<!--        @click="emit('select', row.id === association?.id ? undefined : row)"-->
-<!--      />-->
-      <AppButton
-        text="Details"
-        icon="info-circle"
-        @click="openModal(row)"
-      />
-      <!--        @click="emit('select', row.id === association?.id ? undefined : row)"-->
+      <AppButton text="Details" icon="info-circle" @click="openModal(row)" />
     </template>
 
     <!-- extra columns -->
@@ -126,10 +108,10 @@ import {
   type DirectionalAssociation,
   type Node,
 } from "@/api/model";
+import AppModal from "@/components/AppModal.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppPercentage from "@/components/AppPercentage.vue";
 import AppPredicateBadge from "@/components/AppPredicateBadge.vue";
-import AppModal from "@/components/AppModal.vue";
 import type { Option } from "@/components/AppSelectSingle.vue";
 import AppTable from "@/components/AppTable.vue";
 import type { Cols, Sort } from "@/components/AppTable.vue";
@@ -151,7 +133,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const showModal = ref(false);
-const selectedAssociation = ref<DirectionalAssociation | null>(null);
+const selectedAssociation   = ref<DirectionalAssociation | null>(null);
 
 function openModal(association: DirectionalAssociation) {
   selectedAssociation.value = association;
diff --git a/frontend/src/pages/node/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index 3fe497e7..f6918359 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -30,11 +30,7 @@
     </div>
 
     <AppDetails>
-      <AppDetail
-        title="Evidence Codes"
-        icon="flask"
-        :full="true"
-      >
+      <AppDetail title="Evidence Codes" icon="flask" :full="true">
         <AppFlex gap="small" align-h="left">
           <AppLink
             v-for="(source, index) in association.has_evidence_links"
@@ -55,11 +51,7 @@
         </AppLink>
       </AppDetail>
 
-      <AppDetail
-        title="Publications"
-        icon="book"
-        :full="true"
-      >
+      <AppDetail title="Publications" icon="book" :full="true">
         <AppFlex gap="small" align-h="left">
           <AppLink
             v-for="(publication, index) of association.publications_links"
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index debe24ef..52dfed0f 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -12,9 +12,7 @@
         >No associations with &nbsp;<AppNodeBadge :node="node" />
       </span>
 
-
       <AppFlex gap="small">
-
         <AppCheckbox
           v-if="
             node.category === 'biolink:Gene' &&
@@ -102,9 +100,6 @@ const directOptions = computed(
   ],
 );
 
-/** deselect association when selected category changes */
-watch(category, () => (association.value = undefined));
-
 /** update url from selected category */
 watch(
   category,

From 968a87796b6238d3d59add239a42ade399fc41a7 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Thu, 3 Oct 2024 10:03:32 -0700
Subject: [PATCH 20/27] formatting

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

diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 4aec3947..0c6314f1 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -133,7 +133,7 @@ type Props = {
 const props = defineProps<Props>();
 
 const showModal = ref(false);
-const selectedAssociation   = ref<DirectionalAssociation | null>(null);
+const selectedAssociation = ref<DirectionalAssociation | null>(null);
 
 function openModal(association: DirectionalAssociation) {
   selectedAssociation.value = association;

From c71ddd5c3bcd779f02bfd8e571035e377015d765 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 09:02:53 -0700
Subject: [PATCH 21/27] lint fixes

---
 frontend/src/components/AppTable.vue            | 3 +--
 frontend/src/pages/node/SectionAssociations.vue | 3 ---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index 544517e2..c5b5c8af 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -219,12 +219,11 @@ export type Sort<Key extends string = string> = {
 </script>
 
 <script setup lang="ts" generic="Datum extends object">
-import { computed, watch, type VNode } from "vue";
+import { computed, type VNode } from "vue";
 import type { Options } from "./AppSelectMulti.vue";
 import AppSelectMulti from "./AppSelectMulti.vue";
 import AppSelectSingle from "./AppSelectSingle.vue";
 import AppTextbox from "./AppTextbox.vue";
-import { closeToc } from "./TheTableOfContents.vue";
 
 /** possible keys on datum (remove number and symbol from default object type) */
 type Keys = Extract<keyof Datum, string>;
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 52dfed0f..881c31de 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -76,9 +76,6 @@ type Props = {
 
 const props = defineProps<Props>();
 
-/** selected category of associations to show */
-const category = ref<Option>();
-
 /** include orthologous genes in association table */
 const includeOrthologs = ref(false);
 const direct = ref<Option>();

From dc783c6f1dd6d19596244c716eb04e16d9bf7e1b Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 09:28:54 -0700
Subject: [PATCH 22/27] removed watches on selected category for association
 section, now that all categories are shown

---
 .../src/pages/node/SectionAssociations.vue    | 28 -------------------
 1 file changed, 28 deletions(-)

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 881c31de..fd8c72e7 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -97,35 +97,7 @@ const directOptions = computed(
   ],
 );
 
-/** update url from selected category */
-watch(
-  category,
-  (_, oldValue) => {
-    /** ignore first change to category due to auto-select */
-    if (oldValue)
-      router.replace({
-        ...route,
-        query: { associations: category.value?.id },
-      });
-  },
-  /** avoid extra triggering of watch functions */
-  { flush: "post" },
-);
 
-/** update selected category from url */
-watch(
-  () => route.query.associations,
-  () => {
-    if (!route.query.associations) return;
-    category.value = categoryOptions.value.find(
-      (option) => option.id === route.query.associations,
-    );
-    direct.value = directOptions.value.find(
-      (option) => option.id === route.query.direct,
-    );
-  },
-  { immediate: true },
-);
 watch(
   () => route.query,
   () => {

From d9d559e90becdc16136580804cb3a3ff620be5ca Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 11:28:53 -0700
Subject: [PATCH 23/27] fix type check on null directional association

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

diff --git a/frontend/src/pages/node/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index f6918359..dcf9edc4 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -79,7 +79,7 @@ type Props = {
   /** current node */
   node: Node;
   /** selected association */
-  association?: DirectionalAssociation;
+  association: DirectionalAssociation | null;
 };
 
 const props = defineProps<Props>();

From 3708749c4e2ed5522330f7d933b9e9bcb506b5a0 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 11:38:09 -0700
Subject: [PATCH 24/27] lint fixe

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

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index fd8c72e7..2b54c0f3 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -97,7 +97,6 @@ const directOptions = computed(
   ],
 );
 
-
 watch(
   () => route.query,
   () => {

From 0a9a52ea44f39cd9647c3928ae55b29f77642fda Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 11:42:26 -0700
Subject: [PATCH 25/27] lint fixes

---
 frontend/src/pages/node/SectionAssociations.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 2b54c0f3..15e50cfb 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -57,7 +57,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import { startCase } from "lodash";
 import type { Node } from "@/api/model";
 import AppCheckbox from "@/components/AppCheckbox.vue";
@@ -67,7 +67,6 @@ import AssociationsTable from "@/pages/node/AssociationsTable.vue";
 
 /** route info */
 const route = useRoute();
-const router = useRouter();
 
 type Props = {
   /** current node */

From b93a5a3056d7675cecb44dea2bc5aef0993e1a4f Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 12:03:36 -0700
Subject: [PATCH 26/27] Update node page related e2e tests to match current
 features/behavior

---
 frontend/e2e/node.test.ts   | 34 +---------------------------------
 frontend/e2e/search.test.ts |  2 +-
 2 files changed, 2 insertions(+), 34 deletions(-)

diff --git a/frontend/e2e/node.test.ts b/frontend/e2e/node.test.ts
index 3ab1f6d2..7234be7a 100644
--- a/frontend/e2e/node.test.ts
+++ b/frontend/e2e/node.test.ts
@@ -13,44 +13,12 @@ test("Table of contents works", async ({ page }) => {
     /table of contents/i,
   );
 
-  /** starts closed (due to small screen size) */
-  await expect(page.locator(".toc button")).toHaveAttribute(
-    "aria-expanded",
-    "false",
-  );
-
-  /** click button to open */
-  await page.locator(".toc").click();
-  await expect(page.locator(".toc button")).toHaveAttribute(
-    "aria-expanded",
-    "true",
-  );
-
-  /** click off to close (with small screen size) */
-  await page.locator("body").click({ position: { x: 500, y: 500 } });
-  await expect(page.locator(".toc button")).toHaveAttribute(
-    "aria-expanded",
-    "false",
-  );
-
-  /** open again and check contents */
-  await page.locator(".toc").click();
-  await expect(
-    page.locator(".toc", { hasText: /Overview/i }).first(),
-  ).toBeVisible();
-  await expect(
-    page.locator(".toc", { hasText: /Hierarchy/i }).first(),
-  ).toBeVisible();
-  await expect(
-    page.locator(".toc", { hasText: /Associations/i }).first(),
-  ).toBeVisible();
-
   /** check if solo selection mode works */
   await page.locator(".toc .checkbox").click();
   await expect(
     page
       .locator("main")
-      .getByText(/Overview/i)
+      .getByText(/Ehlers-Danlos syndrome, hypermobility/i)
       .first(),
   ).toBeVisible();
   await expect(
diff --git a/frontend/e2e/search.test.ts b/frontend/e2e/search.test.ts
index 1d1fbc87..bdbaf48d 100644
--- a/frontend/e2e/search.test.ts
+++ b/frontend/e2e/search.test.ts
@@ -19,7 +19,7 @@ test("Recent/frequent results show", async ({ page }) => {
 
   for (const node of nodes) {
     await page.goto("/" + node);
-    await expect(page.locator("#overview")).toBeVisible();
+    await expect(page.locator("#hierarchy")).toBeVisible();
   }
 
   await page.goto("/explore");

From 6a5a29565042af2d27c4bd6bb1621acff6076719 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 12:50:35 -0700
Subject: [PATCH 27/27] Restore h1 level title to node page for accessibility

---
 frontend/src/pages/node/SectionTitle.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/node/SectionTitle.vue b/frontend/src/pages/node/SectionTitle.vue
index 4a67800f..f9bd3c6e 100644
--- a/frontend/src/pages/node/SectionTitle.vue
+++ b/frontend/src/pages/node/SectionTitle.vue
@@ -19,7 +19,11 @@
         />
       </AppFlex>
 
-      <AppHeading class="heading" :icon="getCategoryIcon(node.category)">
+      <AppHeading
+        class="heading"
+        :level="1"
+        :icon="getCategoryIcon(node.category)"
+      >
         <span
           :style="{ textDecoration: node.deprecated ? 'line-through' : '' }"
           v-html="node.name"