From 2c878e844bc2d10664d798570560c04fad6acc27 Mon Sep 17 00:00:00 2001
From: Kevin Schaper <kevinschaper@gmail.com>
Date: Fri, 4 Oct 2024 15:14:21 -0700
Subject: [PATCH] Show all association tables together (#775)

Show all association tables at once on a node page rather than having to
select the association type from an option box. From the initial first
pass, I think the minimum to make this work is going to also include
making the page nav always visible and making sure it has scrollspy
functionality. This may turn into a longer lived PR if we find that we
need to tweak table content before we want to merge.
---
 frontend/e2e/node.test.ts                     |  34 +---
 frontend/e2e/search.test.ts                   |   2 +-
 frontend/src/components/AppHeading.vue        |   9 +
 frontend/src/components/AppPredicateBadge.vue |   7 +-
 frontend/src/components/AppSection.vue        |  52 +++++-
 frontend/src/components/AppTable.vue          |  84 ++++-----
 frontend/src/components/ThePhenogrid.vue      |   2 +-
 .../src/components/TheTableOfContents.vue     |  83 ++++-----
 frontend/src/global/styles.scss               |   7 +-
 frontend/src/global/variables.scss            |   3 +
 frontend/src/pages/node/AssociationsTable.vue |  62 ++++---
 frontend/src/pages/node/PageNode.vue          |   2 +-
 .../pages/node/SectionAssociationDetails.vue  |  22 +--
 .../src/pages/node/SectionAssociations.vue    | 164 ++++++------------
 .../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   |   4 +-
 frontend/src/pages/node/SectionTitle.vue      |  28 +--
 .../src/pages/node/SectionVisualization.vue   |   2 +
 20 files changed, 254 insertions(+), 323 deletions(-)

diff --git a/frontend/e2e/node.test.ts b/frontend/e2e/node.test.ts
index 3ab1f6d25..7234be7ab 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 1d1fbc87e..bdbaf48d9 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");
diff --git a/frontend/src/components/AppHeading.vue b/frontend/src/components/AppHeading.vue
index b140d5828..1b96d267c 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/AppPredicateBadge.vue b/frontend/src/components/AppPredicateBadge.vue
index 83c6c135e..8c5e4d0ef 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>();
@@ -42,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 f32774979..cfb78c62e 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 }, { node }]">
     <slot />
   </section>
 </template>
@@ -14,10 +14,18 @@ type Props = {
   /** width of section */
   width?: "full" | "medium" | "big";
   /** visual design */
-  design?: "normal" | "fill";
+  design?: "normal" | "fill" | "bare";
+  alignment?: "left" | "center";
+  inset?: boolean;
+  node?: boolean;
 };
 
-withDefaults(defineProps<Props>(), { width: "medium", design: "normal" });
+withDefaults(defineProps<Props>(), {
+  width: "medium",
+  design: "normal",
+  alignment: "center",
+  inset: false,
+});
 
 type Slots = {
   default: () => unknown;
@@ -30,21 +38,47 @@ defineSlots<Slots>();
 .section {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 40px;
-  text-align: center;
   transition: background $fast;
+  &.center {
+    align-items: center;
+    gap: 40px;
+    text-align: center;
+  }
+
+  &.left {
+    align-items: flex-start;
+    gap: 20px;
+    text-align: left;
+  }
 
   &.full {
-    padding: 50px 40px;
+    padding: 30px 20px;
+  }
+
+  &.node {
+    margin: 10px 20px 10px $toc-width + 20px !important;
+  }
+  &.inset {
+    padding: 30px 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  &.left {
+    margin: 10px 20px;
   }
 
   &.medium {
-    padding: 50px max(40px, calc((100% - $section) / 2));
+    &.center {
+      padding: 30px max(20px, calc((100% - $section) / 2));
+    }
+    &.left {
+      padding: 5px 15px;
+    }
   }
 
   &.big {
-    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 cfc542b3a..c5b5c8afb 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -8,8 +8,8 @@
 
 <template>
   <!-- table data -->
-  <AppFlex direction="col" :class="['container', { expanded }]">
-    <div ref="scroll" class="scroll force-scrollbar">
+  <AppFlex direction="col" align-h="left" :class="['container']">
+    <div ref="scroll" style="width: 100%">
       <table
         class="table"
         :aria-colcount="cols.length"
@@ -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>
@@ -226,14 +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 { useLocalStorage } from "@vueuse/core";
-import { useScrollable } from "@/composables/use-scrollable";
+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>;
@@ -306,13 +296,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 +373,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);
+  width: 100%;
+  overflow-x: auto;
+  transform: translateX(0);
+  //.cell {
+  //  width: max-content !important;
+  //}
 }
 
 .scroll {
@@ -420,18 +393,21 @@ watch(
 }
 
 .table {
-  margin: 0 auto;
+  width: 100%;
+  //  margin: 0 auto;
   border-collapse: collapse;
-  table-layout: fixed;
+  font-size: 0.9em;
+  //table-layout: fixed;
+  table-layout: auto;
 }
 
 /** all cells */
 .cell {
-  display: flex;
-  align-items: center;
-  max-width: max-content;
-  padding: 5px 10px;
-  gap: 10px;
+  //display: flex;
+  //align-items: center;
+  //max-width: max-content;
+  padding: 3px 6px;
+  gap: 5px;
 
   &.left {
     justify-content: flex-start;
@@ -456,6 +432,7 @@ watch(
 .th,
 .td {
   padding: 0;
+  white-space: nowrap;
 
   &.divider {
     position: relative;
@@ -472,11 +449,26 @@ watch(
 
 /** heading cells */
 .th {
-  padding-bottom: 10px;
+  padding-bottom: 3px;
   font-weight: 600;
   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/ThePhenogrid.vue b/frontend/src/components/ThePhenogrid.vue
index 991331e46..eeb84e2f7 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/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index 4e835c9e7..da4dce959 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -6,55 +6,35 @@
       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>
-
-      <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>
+      <!-- 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>
@@ -110,13 +90,9 @@ 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,
-    subHeader.top + subHeader.height,
-  );
+  nudge.value = Math.max(header.top + header.height);
 
   /** find in view section */
   if (!oneAtATime.value)
@@ -182,18 +158,17 @@ 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;
+  max-width: calc(100vw - 40px);
+  height: 100%;
   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/styles.scss b/frontend/src/global/styles.scss
index 10cdfafc2..efe198df5 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 */
@@ -36,7 +37,7 @@ h1 {
   font-weight: 600;
   font-size: 1.5rem;
   letter-spacing: 1px;
-  text-align: center;
+  text-align: left;
   /** text-transform: uppercase; */
 }
 
@@ -46,7 +47,7 @@ h2 {
   padding: 10px 0;
   font-weight: 500;
   font-size: 1.3rem;
-  text-align: center;
+  text-align: left;
 }
 
 h3 {
@@ -56,7 +57,7 @@ h3 {
   padding: 10px 0;
   font-weight: 500;
   font-size: 1.1rem;
-  text-align: center;
+  text-align: left;
 }
 
 /** elements */
diff --git a/frontend/src/global/variables.scss b/frontend/src/global/variables.scss
index d0e70394c..09ccf4f86 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;
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index ac16b3fcd..0c6314f1c 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -66,20 +66,8 @@
     </template>
 
     <!-- button to show details -->
-    <template #details="{ cell, 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' : 'flask'"
-        :color="row.id === association?.id ? 'primary' : 'secondary'"
-        @click="emit('select', row.id === association?.id ? undefined : row)"
-      />
+    <template #details="{ row }">
+      <AppButton text="Details" icon="info-circle" @click="openModal(row)" />
     </template>
 
     <!-- extra columns -->
@@ -99,6 +87,12 @@
     <!-- publication specific -->
     <!-- no template needed because info just plain text -->
   </AppTable>
+  <AppModal v-model="showModal" label="Association Details">
+    <SectionAssociationDetails
+      :node="node"
+      :association="selectedAssociation"
+    />
+  </AppModal>
 </template>
 
 <script setup lang="ts">
@@ -114,6 +108,7 @@ 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";
@@ -123,6 +118,7 @@ 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,18 +128,39 @@ type Props = {
   /** include orthologs */
   includeOrthologs: boolean;
   direct: Option;
-  /** selected association */
-  association?: DirectionalAssociation;
 };
 
 const props = defineProps<Props>();
 
-type Emits = {
-  /** change selected association */
-  select: [value?: DirectionalAssociation];
-};
+const showModal = 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;
+  }
+});
 
-const emit = defineEmits<Emits>();
+// 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>();
@@ -163,7 +180,6 @@ const cols = computed((): Cols<Datum> => {
       heading: getCategoryLabel(
         associations.value.items[0]?.subject_category || "Subject",
       ),
-      width: "200px",
       sortable: true,
     },
     {
@@ -178,7 +194,6 @@ const cols = computed((): Cols<Datum> => {
       heading: getCategoryLabel(
         associations.value.items[0]?.object_category || "Object",
       ),
-      width: "200px",
       sortable: true,
     },
     {
@@ -204,7 +219,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/PageNode.vue b/frontend/src/pages/node/PageNode.vue
index 29f072e08..5b1be23eb 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/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index bf24286b7..dcf9edc48 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -4,12 +4,10 @@
 -->
 
 <template>
-  <AppSection>
-    <AppHeading icon="flask">Association Details</AppHeading>
+  <AppSection v-if="association">
+    <h2>Association Details</h2>
 
     <div>
-      Details for the selected association... <br />
-
       <div class="selected">
         <AppNodeBadge
           :node="{
@@ -32,12 +30,7 @@
     </div>
 
     <AppDetails>
-      <AppDetail
-        title="Evidence Codes"
-        :count="association.evidence_count"
-        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"
@@ -58,12 +51,7 @@
         </AppLink>
       </AppDetail>
 
-      <AppDetail
-        title="Publications"
-        :count="association.publications?.length"
-        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"
@@ -91,7 +79,7 @@ type Props = {
   /** current node */
   node: Node;
   /** selected association */
-  association: DirectionalAssociation;
+  association: DirectionalAssociation | null;
 };
 
 const props = defineProps<Props>();
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 9c1633ca0..15e50cfb1 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -3,95 +3,70 @@
 -->
 
 <template>
-  <AppSection>
-    <AppHeading icon="arrows-left-right">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 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"
-  />
+  <!-- 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>
+      <span v-if="!categoryOptions.length"
+        >No associations with &nbsp;<AppNodeBadge :node="node" />
+      </span>
+
+      <AppFlex gap="small">
+        <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"
+          :include-orthologs="includeOrthologs"
+          :direct="direct"
+        />
+      </template>
+    </AppSection>
+    <!-- details viewer of association -->
+  </div>
 </template>
 
 <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 { 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";
-import AppSelectSingle from "@/components/AppSelectSingle.vue";
 import AssociationsTable from "@/pages/node/AssociationsTable.vue";
-import SectionAssociationDetails from "@/pages/node/SectionAssociationDetails.vue";
 
 /** route info */
 const route = useRoute();
-const router = useRouter();
 
 type Props = {
   /** current node */
@@ -100,10 +75,6 @@ type Props = {
 
 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);
 const direct = ref<Option>();
@@ -124,38 +95,7 @@ const directOptions = computed(
     { id: "true", label: "directly" },
   ],
 );
-/** deselect association when selected category changes */
-watch(category, () => (association.value = undefined));
 
-/** 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,
   () => {
diff --git a/frontend/src/pages/node/SectionBreadcrumbs.vue b/frontend/src/pages/node/SectionBreadcrumbs.vue
index 9db3e98bc..0d74fad7b 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 5f1080719..93588dae1 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 96d6a7ef5..7f1174e30 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 f9df09455..92162ed2f 100644
--- a/frontend/src/pages/node/SectionOverview.vue
+++ b/frontend/src/pages/node/SectionOverview.vue
@@ -3,9 +3,7 @@
 -->
 
 <template>
-  <AppSection>
-    <AppHeading icon="lightbulb">Overview</AppHeading>
-
+  <AppSection design="bare" alignment="left" class="node">
     <AppDetails>
       <!-- symbol (gene specific) -->
       <AppDetail
diff --git a/frontend/src/pages/node/SectionTitle.vue b/frontend/src/pages/node/SectionTitle.vue
index 9a02c7aa0..f9bd3c6eb 100644
--- a/frontend/src/pages/node/SectionTitle.vue
+++ b/frontend/src/pages/node/SectionTitle.vue
@@ -3,18 +3,9 @@
 -->
 
 <template>
-  <AppSection design="fill" class="section">
-    <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>
+  <AppSection design="bare" alignment="left" class="section node">
+    <AppFlex direction="col">
+      <AppFlex align-h="right">
         <span>
           {{ getCategoryLabel(node.category) }}
         </span>
@@ -28,6 +19,19 @@
         />
       </AppFlex>
 
+      <AppHeading
+        class="heading"
+        :level="1"
+        :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"
diff --git a/frontend/src/pages/node/SectionVisualization.vue b/frontend/src/pages/node/SectionVisualization.vue
index c33ed0110..a42e4dfae 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 node"
+    alignment="left"
   >
     <AppHeading icon="chart-bar">HistoPheno</AppHeading>
     <HistoPheno :node="node" />