From ea1ddd48d2b445b01e54ea488056e9a14989b08c Mon Sep 17 00:00:00 2001
From: Vincent Rubinetti <vince.rubinetti@gmail.com>
Date: Fri, 25 Aug 2023 04:20:08 +0900
Subject: [PATCH] Header search, re-add breadcrumbs, other small features
 (#288)

Closes #266
Closes #227
Closes #77
Closes #80

Summary of changes (for reviewers, going commit by commit is better for
this PR):

- rework 404 redirect
- add "BETA" to prod banner
- update category icons
- change css data attr selectors to class selectors
- show taxon info in node badge for genes
- in node badge, remove link option. instead, show link unless already
on page being linked to (current node).
- rework and reinsert breadcrumbs, but only hook up to hierarchy
- refactor predicate badge
- dont automatically change case of labels in select components, do that
from parent using it
- in multi select component, solo-select first option clicked
- add icon support to multi select component
- in select components, fix hover then enter press bug
- tweak table component styling, save expanded state to local storage
- fix tab component keyboard wrapping behavior
- add search box to header and change styles to accommodate
- tweak homepage nexus visualization
- on testbed, show all custom icons
- change tab search higher-order-component to accommodate search box in
header
- re-add breadcrumbs section
- add "back to search" button at top of node page
---
 frontend/public/404.html                      |  18 +-
 frontend/src/App.vue                          |   3 +-
 frontend/src/api/index.ts                     |   7 +-
 ...omy.svg => category-anatomical-entity.svg} |   7 +-
 frontend/src/assets/icons/category-case.svg   |   7 +-
 .../assets/icons/category-causal-disease.svg  |   7 +-
 .../src/assets/icons/category-causal-gene.svg |   7 +-
 .../src/assets/icons/category-cell-line.svg   |   7 +-
 .../icons/category-correlated-disease.svg     |   7 +-
 .../assets/icons/category-correlated-gene.svg |   7 +-
 .../src/assets/icons/category-disease.svg     |   7 +-
 .../src/assets/icons/category-function.svg    |   7 +-
 frontend/src/assets/icons/category-gene.svg   |   7 +-
 .../src/assets/icons/category-genotype.svg    |   7 +-
 .../src/assets/icons/category-homolog.svg     |   7 +-
 .../src/assets/icons/category-interaction.svg |   7 +-
 frontend/src/assets/icons/category-model.svg  |   7 +-
 .../icons/category-ortholog-disease.svg       |   7 +-
 .../icons/category-ortholog-phenotype.svg     |   7 +-
 .../src/assets/icons/category-pathway.svg     |   7 +-
 .../icons/category-phenotypic-feature.svg     |   7 +-
 .../icons/category-phenotypic-quality.svg     |  12 +
 .../src/assets/icons/category-publication.svg |   7 +-
 .../src/assets/icons/category-variant.svg     |   7 +-
 frontend/src/assets/icons/loading.svg         |   9 +-
 .../src/assets/icons/phenotype-search.svg     |  62 +--
 frontend/src/assets/icons/toolbox.svg         |   5 +-
 frontend/src/components/AppAccordion.vue      |   8 +-
 frontend/src/components/AppButton.vue         |  31 +-
 frontend/src/components/AppDetail.vue         |  11 +-
 frontend/src/components/AppFlex.vue           |  23 +-
 frontend/src/components/AppGallery.vue        |   8 +-
 frontend/src/components/AppHeading.vue        |   4 +-
 frontend/src/components/AppIcon.vue           |  30 +-
 frontend/src/components/AppNodeBadge.vue      |  29 +-
 frontend/src/components/AppPost.vue           |   7 +-
 frontend/src/components/AppPredicateBadge.vue |  19 +-
 frontend/src/components/AppSection.vue        |  12 +-
 .../src/components/AppSelectAutocomplete.vue  |  13 +-
 frontend/src/components/AppSelectMulti.vue    |  69 +--
 frontend/src/components/AppSelectSingle.vue   |  28 +-
 frontend/src/components/AppSelectTags.vue     |  22 +-
 frontend/src/components/AppStatus.vue         |  15 +-
 frontend/src/components/AppTable.vue          | 439 +++++++++---------
 frontend/src/components/AppTabs.vue           |  32 +-
 frontend/src/components/AppTextbox.vue        |  10 +-
 frontend/src/components/AppTile.vue           |   4 +-
 frontend/src/components/AppUpload.vue         |   5 +-
 frontend/src/components/TheFooter.vue         |   2 +-
 frontend/src/components/TheHeader.vue         |  39 +-
 frontend/src/components/TheNexus.vue          |  37 +-
 frontend/src/components/TheSnackbar.vue       |   2 +-
 .../src/components/TheTableOfContents.vue     |  10 +-
 frontend/src/global/breadcrumbs.ts            |  13 +-
 frontend/src/global/styles.scss               |   9 +-
 frontend/src/global/variables.scss            |  11 +-
 frontend/src/main.ts                          |   1 -
 frontend/src/pages/PageHome.vue               |   4 +-
 frontend/src/pages/PageTestbed.vue            |  42 +-
 frontend/src/pages/about/PageAbout.vue        |   2 +-
 .../src/pages/about/PagePhenomicsFirst.vue    |   2 +-
 frontend/src/pages/explore/PageExplore.vue    |   2 +-
 .../pages/explore/TabPhenotypeExplorer.vue    |   2 +-
 frontend/src/pages/explore/TabSearch.vue      |  76 ++-
 .../src/pages/node/AssociationsSummary.vue    |   2 +
 frontend/src/pages/node/AssociationsTable.vue |  21 +-
 frontend/src/pages/node/EvidenceViewer.vue    |  11 +-
 frontend/src/pages/node/PageNode.vue          |   2 +
 .../src/pages/node/SectionAssociations.vue    |   9 +-
 .../src/pages/node/SectionBreadcrumbs.vue     |  75 +++
 frontend/src/pages/node/SectionHierarchy.vue  |  20 +-
 frontend/src/pages/node/SectionTitle.vue      |  35 +-
 frontend/src/router/index.ts                  |  28 +-
 frontend/src/util/object.ts                   |   4 +-
 frontend/tsconfig.json                        |   8 +-
 frontend/unit/uptime.test.ts                  |   8 +-
 76 files changed, 914 insertions(+), 638 deletions(-)
 rename frontend/src/assets/icons/{category-anatomy.svg => category-anatomical-entity.svg} (75%)
 create mode 100644 frontend/src/assets/icons/category-phenotypic-quality.svg
 create mode 100644 frontend/src/pages/node/SectionBreadcrumbs.vue

diff --git a/frontend/public/404.html b/frontend/public/404.html
index 8522cdbc5..b3a086ee0 100644
--- a/frontend/public/404.html
+++ b/frontend/public/404.html
@@ -10,18 +10,16 @@
        * everything.
        */
 
-      /** turn on "preserve log" in chrome dev tools to still see this after nav */
-      console.info("Redirecting from:", window.location);
-      console.info("With state:", window.history.state);
+      /** turn on "preserve log" in dev tools to still see this after nav */
+      console.info("Redirecting from:", location);
+      console.info("With state:", history.state);
 
-      /** get redirect and state */
-      const { origin, pathname, search, hash } = window.location;
-      const { state } = window.history;
+      /** save redirect and state */
+      sessionStorage.redirect = location.href;
+      sessionStorage.redirectState = JSON.stringify(history.state);
 
-      /** set redirect and state */
-      window.sessionStorage.redirect = pathname + search + hash;
-      window.sessionStorage.redirectState = JSON.stringify(state);
-      window.location = "/";
+      /** navigate */
+      location = "/";
     </script>
   </body>
 </html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e3fb13bf8..cefeb7cb1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,7 +5,8 @@
 <template>
   <TheBanner>
     This web app is the
-    <strong v-if="apiName === 'beta'">BETA VERSION</strong
+    <strong v-if="apiName === 'v3'">BETA VERSION</strong
+    ><strong v-if="apiName === 'beta'">BETA VERSION</strong
     ><strong v-if="apiName === 'dev'">DEV VERSION</strong> successor to the
     <AppLink to="https://monarchinitiative.org/">old web app here</AppLink>. Not
     all features are implemented yet. Please use the feedback form to tell us
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index db882fbbf..53b584462 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,8 +1,8 @@
 /** base biolink api url */
 export const biolink = "https://api.monarchinitiative.org/api";
 
-/** served location of web app, verbatim from browser address bar */
-const url = new URL(window.location.href);
+/** served location of web app, from address bar or storage redirect */
+const url = new URL(window.sessionStorage.redirectHref || window.location.href);
 
 /** get api name/version to use */
 
@@ -50,7 +50,6 @@ if (apiName === "relative") monarch = suffix;
 
 export { monarch };
 
-/** debug */
 console.info({ fromParam, fromEnv, fromDomain, apiName, monarch });
 
 /**
@@ -107,7 +106,6 @@ export const request = async <Response>(
   /** first check if request is cached */
   let response = await cache.match(request);
 
-  /** log details for debugging (except don't clutter logs when running tests) */
   if (import.meta.env.MODE !== "test") {
     console.groupCollapsed(
       response ? "📞 Request (cached)" : "📞 Request (new)",
@@ -148,7 +146,6 @@ export const request = async <Response>(
   const parsed: Response =
     parse === "text" ? await response.text() : await response.json();
 
-  /** log details for debugging (except don't clutter logs when running tests) */
   if (import.meta.env.MODE !== "test") {
     console.groupCollapsed("📣 Response", endpoint);
     console.info("Url", url);
diff --git a/frontend/src/assets/icons/category-anatomy.svg b/frontend/src/assets/icons/category-anatomical-entity.svg
similarity index 75%
rename from frontend/src/assets/icons/category-anatomy.svg
rename to frontend/src/assets/icons/category-anatomical-entity.svg
index 4aaba48f8..57e95723c 100644
--- a/frontend/src/assets/icons/category-anatomy.svg
+++ b/frontend/src/assets/icons/category-anatomical-entity.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M50 15v25m0 0l-12.5 7.5M50 40l12.5 7.5" />
   <path
diff --git a/frontend/src/assets/icons/category-case.svg b/frontend/src/assets/icons/category-case.svg
index eecc6f04b..e89baa5fc 100644
--- a/frontend/src/assets/icons/category-case.svg
+++ b/frontend/src/assets/icons/category-case.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M45 46v-9h10v9h9v10h-9v9H45v-9h-9V46h9z" />
   <path d="M23 22l-3 7v45h60V29H40l-2.5-7H23z" />
diff --git a/frontend/src/assets/icons/category-causal-disease.svg b/frontend/src/assets/icons/category-causal-disease.svg
index 25599c26d..5619897cd 100644
--- a/frontend/src/assets/icons/category-causal-disease.svg
+++ b/frontend/src/assets/icons/category-causal-disease.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M70 80C25 50 30 17 50 17s25 33-20 63" />
 </svg>
diff --git a/frontend/src/assets/icons/category-causal-gene.svg b/frontend/src/assets/icons/category-causal-gene.svg
index 943add2e3..18c15dfb8 100644
--- a/frontend/src/assets/icons/category-causal-gene.svg
+++ b/frontend/src/assets/icons/category-causal-gene.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M30 17.5C30 30 40 40 45 45m10 10c5 5 15 15 15 27.5" />
   <path d="M70 17.5C70 30 60 40 55 45L45 55c-5 5-15 15-15 27.5" />
diff --git a/frontend/src/assets/icons/category-cell-line.svg b/frontend/src/assets/icons/category-cell-line.svg
index 51a1a2578..f04162876 100644
--- a/frontend/src/assets/icons/category-cell-line.svg
+++ b/frontend/src/assets/icons/category-cell-line.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M35 17.5h30M40 25v50c0 5 2.5 10 10 10s10-5 10-10V25m-7 20v25" />
 </svg>
diff --git a/frontend/src/assets/icons/category-correlated-disease.svg b/frontend/src/assets/icons/category-correlated-disease.svg
index 25599c26d..5619897cd 100644
--- a/frontend/src/assets/icons/category-correlated-disease.svg
+++ b/frontend/src/assets/icons/category-correlated-disease.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M70 80C25 50 30 17 50 17s25 33-20 63" />
 </svg>
diff --git a/frontend/src/assets/icons/category-correlated-gene.svg b/frontend/src/assets/icons/category-correlated-gene.svg
index 943add2e3..18c15dfb8 100644
--- a/frontend/src/assets/icons/category-correlated-gene.svg
+++ b/frontend/src/assets/icons/category-correlated-gene.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M30 17.5C30 30 40 40 45 45m10 10c5 5 15 15 15 27.5" />
   <path d="M70 17.5C70 30 60 40 55 45L45 55c-5 5-15 15-15 27.5" />
diff --git a/frontend/src/assets/icons/category-disease.svg b/frontend/src/assets/icons/category-disease.svg
index 25599c26d..5619897cd 100644
--- a/frontend/src/assets/icons/category-disease.svg
+++ b/frontend/src/assets/icons/category-disease.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M70 80C25 50 30 17 50 17s25 33-20 63" />
 </svg>
diff --git a/frontend/src/assets/icons/category-function.svg b/frontend/src/assets/icons/category-function.svg
index 3925b6260..762f5bfea 100644
--- a/frontend/src/assets/icons/category-function.svg
+++ b/frontend/src/assets/icons/category-function.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path
     d="M12 50c0-4 3-6 6-6h39c1-5 6.5-10 14-10s13 6.5 14 10h-9l-5 6 5 6h9c-1 3.5-6.5 10-14 10s-13-5-14-10H18c-3 0-6-2-6-6z"
diff --git a/frontend/src/assets/icons/category-gene.svg b/frontend/src/assets/icons/category-gene.svg
index 943add2e3..18c15dfb8 100644
--- a/frontend/src/assets/icons/category-gene.svg
+++ b/frontend/src/assets/icons/category-gene.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M30 17.5C30 30 40 40 45 45m10 10c5 5 15 15 15 27.5" />
   <path d="M70 17.5C70 30 60 40 55 45L45 55c-5 5-15 15-15 27.5" />
diff --git a/frontend/src/assets/icons/category-genotype.svg b/frontend/src/assets/icons/category-genotype.svg
index 869345362..c4ffc4c9f 100644
--- a/frontend/src/assets/icons/category-genotype.svg
+++ b/frontend/src/assets/icons/category-genotype.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M44 15v5m0 6v1m0 6v3m0 11v8m0 6v1m0 6v2m0 6v9" />
   <path d="M56 15v5m0 6v1m0 6v3m0 11v8m0 6v1m0 6v2m0 6v9" />
diff --git a/frontend/src/assets/icons/category-homolog.svg b/frontend/src/assets/icons/category-homolog.svg
index d81e8a94e..6011eb00f 100644
--- a/frontend/src/assets/icons/category-homolog.svg
+++ b/frontend/src/assets/icons/category-homolog.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M45 25c0 9.615 6.25 16.154 10 20m10 10c3.75 3.846 10 10.385 10 20" />
   <path
diff --git a/frontend/src/assets/icons/category-interaction.svg b/frontend/src/assets/icons/category-interaction.svg
index 7a3d88c0b..6fd073aad 100644
--- a/frontend/src/assets/icons/category-interaction.svg
+++ b/frontend/src/assets/icons/category-interaction.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <circle cx="50" cy="50" r="10" />
   <circle cx="50" cy="17" r="5" />
diff --git a/frontend/src/assets/icons/category-model.svg b/frontend/src/assets/icons/category-model.svg
index a772af5c7..299a00dc0 100644
--- a/frontend/src/assets/icons/category-model.svg
+++ b/frontend/src/assets/icons/category-model.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path
     d="M55 80c-10 0-14 0-24-5S13 60 13 45m0 0c0-15 15-23 25-23s12 3 16 6 7 7 13 7 7 2 9 4 8 9 8 9c2 2 3 5 1 7s-4 2-11 2-14.823 3-25 3c-10 0-19-1-24-2.5S13 55 13 45z"
diff --git a/frontend/src/assets/icons/category-ortholog-disease.svg b/frontend/src/assets/icons/category-ortholog-disease.svg
index 178f10165..a378b6d0c 100644
--- a/frontend/src/assets/icons/category-ortholog-disease.svg
+++ b/frontend/src/assets/icons/category-ortholog-disease.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M75 72C41.25 49.619 45 25 60 25s18.75 24.619-15 47" />
   <path d="M15 45s2-2 5-2 5 2 5 2 2 2 5 2 5-2 5-2" />
diff --git a/frontend/src/assets/icons/category-ortholog-phenotype.svg b/frontend/src/assets/icons/category-ortholog-phenotype.svg
index cb55c43c2..ec6a5e33a 100644
--- a/frontend/src/assets/icons/category-ortholog-phenotype.svg
+++ b/frontend/src/assets/icons/category-ortholog-phenotype.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <circle cx="60" cy="44" r="12" />
   <path d="M48 44v28" />
diff --git a/frontend/src/assets/icons/category-pathway.svg b/frontend/src/assets/icons/category-pathway.svg
index bc8e3ab84..8701fbe7c 100644
--- a/frontend/src/assets/icons/category-pathway.svg
+++ b/frontend/src/assets/icons/category-pathway.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path
     d="M30 72V40c0-6 4-10 10-10s10 4 10 10v20c0 6 4 10 10 10s10-4 10-10V20m0 0l-7 7m7-7l7 7"
diff --git a/frontend/src/assets/icons/category-phenotypic-feature.svg b/frontend/src/assets/icons/category-phenotypic-feature.svg
index 68ea5ac10..3679f5795 100644
--- a/frontend/src/assets/icons/category-phenotypic-feature.svg
+++ b/frontend/src/assets/icons/category-phenotypic-feature.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <circle cx="50" cy="42" r="18" />
   <path d="M32 42v41" />
diff --git a/frontend/src/assets/icons/category-phenotypic-quality.svg b/frontend/src/assets/icons/category-phenotypic-quality.svg
new file mode 100644
index 000000000..3679f5795
--- /dev/null
+++ b/frontend/src/assets/icons/category-phenotypic-quality.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
+  <circle cx="50" cy="50" r="55" />
+  <circle cx="50" cy="42" r="18" />
+  <path d="M32 42v41" />
+  <path d="M32 21s7-7 18-7 18 7 18 7" />
+  <path d="M55 43v-2h2v2h-2z" />
+</svg>
diff --git a/frontend/src/assets/icons/category-publication.svg b/frontend/src/assets/icons/category-publication.svg
index cf1d45355..309c009c1 100644
--- a/frontend/src/assets/icons/category-publication.svg
+++ b/frontend/src/assets/icons/category-publication.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path
     d="M25 72c-4 0-5-3.333-5-5V37h10m-5 35c4 0 5-3.333 5-5V37m-5 35h50c4 0 5-3.333 5-5V27H30v10"
diff --git a/frontend/src/assets/icons/category-variant.svg b/frontend/src/assets/icons/category-variant.svg
index d47c38455..376dcdf44 100644
--- a/frontend/src/assets/icons/category-variant.svg
+++ b/frontend/src/assets/icons/category-variant.svg
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 120">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="-10 -10 120 120"
+  fill="none"
+  stroke="currentColor"
+>
   <circle cx="50" cy="50" r="55" />
   <path d="M20 28c0 18.636 14.667 33.545 22 41" />
   <path d="M57 82l2 2" />
diff --git a/frontend/src/assets/icons/loading.svg b/frontend/src/assets/icons/loading.svg
index 301226ef7..02706d694 100644
--- a/frontend/src/assets/icons/loading.svg
+++ b/frontend/src/assets/icons/loading.svg
@@ -2,6 +2,8 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="-50 -50 100 100"
   data-spinner="true"
+  fill="none"
+  stroke="currentColor"
 >
   <style>
     [data-spinner="true"] {
@@ -17,10 +19,5 @@
       }
     }
   </style>
-  <path
-    fill="none"
-    stroke="currentColor"
-    stroke-width="10"
-    d="M 0 40 A 40 40 0 1 1 40 0"
-  />
+  <path stroke-width="10" d="M 0 40 A 40 40 0 1 1 40 0" />
 </svg>
diff --git a/frontend/src/assets/icons/phenotype-search.svg b/frontend/src/assets/icons/phenotype-search.svg
index f9d8f61af..214272b95 100644
--- a/frontend/src/assets/icons/phenotype-search.svg
+++ b/frontend/src/assets/icons/phenotype-search.svg
@@ -1,53 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 100 100"
+  fill="none"
+  stroke="currentColor"
+  stroke-linecap="round"
+>
   <g transform="translate(43,43) scale(0.5) translate(-50,-50)">
-    <circle
-      fill="none"
-      stroke="currentColor"
-      stroke-width="6"
-      stroke-linecap="round"
-      cx="50"
-      cy="42"
-      r="18"
-    />
-    <path
-      fill="none"
-      stroke="currentColor"
-      stroke-width="6"
-      stroke-linecap="round"
-      d="M32 42v41"
-    />
-    <path
-      fill="none"
-      stroke="currentColor"
-      stroke-width="6"
-      stroke-linecap="round"
-      d="M32 21s7-7 18-7 18 7 18 7"
-    />
-    <path
-      fill="none"
-      stroke="currentColor"
-      stroke-width="6"
-      stroke-linecap="round"
-      d="M55 43v-2h2v2h-2z"
-    />
+    <circle stroke-width="6" cx="50" cy="42" r="18" />
+    <path stroke-width="6" d="M32 42v41" />
+    <path stroke-width="6" d="M32 21s7-7 18-7 18 7 18 7" />
+    <path stroke-width="6" d="M55 43v-2h2v2h-2z" />
   </g>
 
-  <circle
-    cx="42"
-    cy="42"
-    r="33"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="5"
-  />
-  <line
-    x1="67"
-    y1="67"
-    x2="80"
-    y2="80"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="7"
-    stroke-linecap="round"
-  />
+  <circle cx="42" cy="42" r="33" stroke-width="5" />
+  <line x1="67" y1="67" x2="80" y2="80" stroke-width="7" />
 </svg>
diff --git a/frontend/src/assets/icons/toolbox.svg b/frontend/src/assets/icons/toolbox.svg
index e0bc57095..e97c2c756 100644
--- a/frontend/src/assets/icons/toolbox.svg
+++ b/frontend/src/assets/icons/toolbox.svg
@@ -2,10 +2,9 @@
   <path
     fill="currentColor"
     d="M20,14H16a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V15A1,1,0,0,0,20,14Zm-.4,6.6H16.4V15.4h3.2Z"
-  ></path>
+  />
   <path
     fill="currentColor"
     d="M33.71,12.38,29.62,8.29A1,1,0,0,0,28.92,8h-5V6.05A2,2,0,0,0,22,4H13.84A1.92,1.92,0,0,0,12,6.05V8H7.08a1,1,0,0,0-.71.29L2.29,12.38a1,1,0,0,0-.29.71V28a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V13.08A1,1,0,0,0,33.71,12.38ZM14,6h8V8H14ZM32,17H22v1.93H32V28H4V18.93H14V17H4V13.5L7.5,10h21L32,13.5Z"
-  ></path>
-  <rect x="0" y="0" width="36" height="36" fill="none" />
+  />
 </svg>
diff --git a/frontend/src/components/AppAccordion.vue b/frontend/src/components/AppAccordion.vue
index 0edbcd173..f1f3ede89 100644
--- a/frontend/src/components/AppAccordion.vue
+++ b/frontend/src/components/AppAccordion.vue
@@ -13,7 +13,7 @@
       <span v-if="text">{{ text }}</span>
       <AppIcon v-if="icon" class="icon" :icon="icon" />
     </span>
-    <AppIcon class="caret" icon="angle-down" :data-expanded="expanded" />
+    <AppIcon :class="['caret', { expanded }]" icon="angle-down" />
   </button>
   <div v-if="expanded" class="content">
     <slot />
@@ -78,9 +78,9 @@ const expanded = ref(false);
   position: relative;
   top: 2px;
   transition: transform $fast;
+}
 
-  &[data-expanded="true"] {
-    transform: rotate(-180deg);
-  }
+.expanded {
+  transform: rotate(-180deg);
 }
 </style>
diff --git a/frontend/src/components/AppButton.vue b/frontend/src/components/AppButton.vue
index 0d370cc98..7909f833b 100644
--- a/frontend/src/components/AppButton.vue
+++ b/frontend/src/components/AppButton.vue
@@ -6,12 +6,9 @@
   <component
     :is="component"
     ref="button"
-    class="button"
+    :class="['button', design, color, { text }]"
     :to="to"
     :type="type"
-    :data-design="design"
-    :data-color="color"
-    :data-text="!!text"
     @click="copy ? copyToClipboard() : click"
   >
     <span v-if="text" class="truncate">{{ text }}</span>
@@ -86,7 +83,7 @@ defineExpose({ button });
     opacity $fast,
     box-shadow $fast;
 
-  &[data-design="normal"] {
+  &.normal {
     min-width: min(200px, calc(100% - 40px));
     min-height: 40px;
     padding: 5px 20px;
@@ -95,11 +92,11 @@ defineExpose({ button });
     font-weight: 500;
     font-size: 1rem;
 
-    &[data-color="primary"] {
+    &.primary {
       background: $theme-light;
     }
 
-    &[data-color="secondary"] {
+    &.secondary {
       background: $light-gray;
     }
 
@@ -110,26 +107,26 @@ defineExpose({ button });
     }
   }
 
-  &[data-design="circle"] {
+  &.circle {
     border-radius: 999px;
     color: $off-black;
 
-    &[data-text="true"] {
+    &.text {
       min-width: 2em;
       min-height: 2em;
       padding: 0.25em 0.75em;
     }
 
-    &:not([data-text="true"]) {
+    &:not(.text) {
       width: 2.5em;
       height: 2.5em;
     }
 
-    &[data-color="primary"] {
+    &.primary {
       background: $theme-light;
     }
 
-    &[data-color="secondary"] {
+    &.secondary {
       background: $light-gray;
     }
 
@@ -140,16 +137,16 @@ defineExpose({ button });
     }
   }
 
-  &[data-design="small"] {
+  &.small {
     flex-direction: row-reverse;
     padding: 3px;
     border-radius: $rounded;
 
-    &[data-color="primary"] {
+    &.primary {
       color: $theme;
     }
 
-    &[data-color="secondary"] {
+    &.secondary {
       color: $dark-gray;
     }
 
@@ -162,8 +159,8 @@ defineExpose({ button });
 </style>
 
 <style lang="scss">
-[data-design="fill"] {
-  .button[data-design="circle"][data-color="primary"] {
+.fill {
+  .button.circle.primary {
     background: $theme-mid;
   }
 }
diff --git a/frontend/src/components/AppDetail.vue b/frontend/src/components/AppDetail.vue
index e54e951f5..14d902ff5 100644
--- a/frontend/src/components/AppDetail.vue
+++ b/frontend/src/components/AppDetail.vue
@@ -8,8 +8,7 @@
     align-h="left"
     direction="col"
     gap="small"
-    class="detail"
-    :data-big="big"
+    :class="['detail', { big }]"
   >
     <AppFlex gap="small" align-h="left">
       <AppIcon v-if="icon" :icon="icon" class="icon" />
@@ -69,18 +68,18 @@ defineSlots<Slots>();
   line-height: $spacing;
   text-align: left;
 
-  &[data-big="true"] {
+  &.big {
     width: 100%;
   }
 
-  &[data-big="false"] {
+  &:not(.big) {
     /** keep in sync with AppDetails gap */
     width: calc((100% - 30px) / 2);
   }
 
   @media (max-width: 700px) {
-    &[data-big] {
-      width: 100%;
+    & {
+      width: 100% !important;
     }
   }
 }
diff --git a/frontend/src/components/AppFlex.vue b/frontend/src/components/AppFlex.vue
index 229d6539f..b4fe4d89e 100644
--- a/frontend/src/components/AppFlex.vue
+++ b/frontend/src/components/AppFlex.vue
@@ -6,10 +6,7 @@
 
 <template>
   <div
-    class="flex"
-    :data-flow="flow"
-    :data-direction="direction"
-    :data-gap="gap"
+    :class="['flex', flow, direction, gap]"
     :style="{ justifyContent, alignItems }"
   >
     <slot />
@@ -67,40 +64,40 @@ const alignItems = computed(() =>
 
 <style lang="scss" scoped>
 .flex {
-  &[data-flow="block"] {
+  &.block {
     display: flex;
     width: 100%;
   }
 
-  &[data-flow="inline"] {
+  &.inline {
     display: inline-flex;
   }
 
-  &[data-direction="row"] {
+  &.row {
     flex-wrap: wrap;
   }
 
-  &[data-direction="col"] {
+  &.col {
     flex-direction: column;
   }
 
-  &[data-gap="none"] {
+  &.none {
     gap: 0;
   }
 
-  &[data-gap="tiny"] {
+  &.tiny {
     gap: 5px;
   }
 
-  &[data-gap="small"] {
+  &.small {
     gap: 10px;
   }
 
-  &[data-gap="medium"] {
+  &.medium {
     gap: 20px;
   }
 
-  &[data-gap="big"] {
+  &.big {
     gap: 40px;
   }
 }
diff --git a/frontend/src/components/AppGallery.vue b/frontend/src/components/AppGallery.vue
index cf4eea88c..cb045b528 100644
--- a/frontend/src/components/AppGallery.vue
+++ b/frontend/src/components/AppGallery.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <div class="gallery" :data-size="size">
+  <div :class="['gallery', size]">
     <slot />
   </div>
 </template>
@@ -33,7 +33,7 @@ $col: minmax(0, 1fr);
   justify-items: stretch;
   width: 100%;
 
-  &[data-size="small"] {
+  &.small {
     grid-template-columns: $col $col $col $col $col;
     gap: 20px;
 
@@ -46,7 +46,7 @@ $col: minmax(0, 1fr);
     }
   }
 
-  &[data-size="medium"] {
+  &.medium {
     grid-template-columns: $col $col $col;
     gap: 40px;
 
@@ -59,7 +59,7 @@ $col: minmax(0, 1fr);
     }
   }
 
-  &[data-size="big"] {
+  &.big {
     grid-template-columns: $col $col;
     gap: 40px;
 
diff --git a/frontend/src/components/AppHeading.vue b/frontend/src/components/AppHeading.vue
index 0a494e569..25628b766 100644
--- a/frontend/src/components/AppHeading.vue
+++ b/frontend/src/components/AppHeading.vue
@@ -137,13 +137,13 @@ h3 {
 </style>
 
 <style lang="scss">
-[data-design="fill"] {
+section.fill {
   h1,
   h2,
   h3 {
     .icon {
       height: 1.2em;
-      color: $theme-dark;
+      color: $theme;
     }
   }
 }
diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index 720c25a51..f5c1ba8ce 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -6,7 +6,7 @@
   <component
     :is="customIcon"
     v-if="isCustom"
-    class="icon"
+    class="custom"
     :data-icon="icon"
     aria-hidden="true"
   />
@@ -14,9 +14,10 @@
     v-else-if="fontAwesome"
     :icon="fontAwesome"
     aria-hidden="true"
+    class="fa"
   />
   <svg v-else-if="initials" viewBox="-10 -10 120 120" class="initials">
-    <circle cx="50" cy="50" r="55" />
+    <circle fill="none" stroke="currentColor" cx="50" cy="50" r="55" />
     <text x="50" y="54">
       {{ initials }}
     </text>
@@ -76,27 +77,28 @@ const initials = computed(
 </script>
 
 <style lang="scss" scoped>
-.icon {
+$thickness: 5px;
+
+.custom {
   height: 1em;
-}
 
-/** category icon styles */
-[data-icon^="category-"] {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 7;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  height: 1.2em;
+  /** category icon styles */
+  &[data-icon^="category-"] {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: $thickness;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
 }
 
 .initials {
-  height: 1.2em;
+  height: 1em;
 
   circle {
     fill: none;
     stroke: currentColor;
-    stroke-width: 5;
+    stroke-width: $thickness;
   }
 
   text {
diff --git a/frontend/src/components/AppNodeBadge.vue b/frontend/src/components/AppNodeBadge.vue
index 47f4b14c3..4299013d3 100644
--- a/frontend/src/components/AppNodeBadge.vue
+++ b/frontend/src/components/AppNodeBadge.vue
@@ -11,41 +11,56 @@
       :icon="getCategoryIcon(node.category)"
     />
     <AppLink
-      v-if="link"
+      v-if="!currentPage"
       :to="`/node/${node.id}`"
       :state="
-        breadcrumb ? { breadcrumbs: [...breadcrumbs, breadcrumb] } : undefined
+        breadcrumb
+          ? { breadcrumbs: [...breadcrumbs, breadcrumb] }
+          : state || undefined
       "
       >{{ node.name || node.id }}</AppLink
     >
     <span v-else class="name">{{ node.name }}</span>
+    <span v-if="node.in_taxon_label"> ({{ node.info }})</span>
+    <span v-if="node.info"> ({{ node.info }})</span>
   </span>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { getCategoryIcon, getCategoryLabel } from "@/api/categories";
 import type { Node } from "@/api/model";
 import { breadcrumbs } from "@/global/breadcrumbs";
+import type { Breadcrumb } from "@/global/breadcrumbs";
 
 type Props = {
   /** node represented by badge */
-  node: Pick<Node, "id" | "name" | "category">;
+  node: Partial<Node> & {
+    /** extra info to show in parens */
+    info?: string;
+  };
   /** whether to include icon */
   icon?: boolean;
-  /** whether to include link */
-  link?: boolean;
   /**
    * breadcrumb object to add list when badge clicked on. include node that user
    * came from and relation between that node and this node.
    */
-  breadcrumb?: { [key: string]: unknown };
+  breadcrumb?: Breadcrumb;
+  /** state data to pass through to link component */
+  state?: { [key: string]: unknown };
 };
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   icon: true,
   link: true,
   breadcrumb: undefined,
+  state: undefined,
 });
+
+/** whether we're already on page we're linking to */
+const currentPage = computed(() =>
+  window.location.pathname.endsWith("/node/" + (props.node.id || "")),
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/AppPost.vue b/frontend/src/components/AppPost.vue
index d3644457f..7517018b9 100644
--- a/frontend/src/components/AppPost.vue
+++ b/frontend/src/components/AppPost.vue
@@ -5,7 +5,7 @@
 
 <template>
   <div class="post">
-    <div class="image" :data-image="!!image">
+    <div v-if="image" class="image">
       <img :src="image" alt="" />
     </div>
     <AppFlex align-h="left" direction="col" gap="small" class="text">
@@ -59,10 +59,7 @@ defineProps<Props>();
   width: 100px;
   height: 100px;
   overflow: hidden;
-
-  &[data-image="true"] {
-    box-shadow: $shadow;
-  }
+  box-shadow: $shadow;
 
   img {
     width: 100%;
diff --git a/frontend/src/components/AppPredicateBadge.vue b/frontend/src/components/AppPredicateBadge.vue
index 5ae8b28f1..ef6f9d54f 100644
--- a/frontend/src/components/AppPredicateBadge.vue
+++ b/frontend/src/components/AppPredicateBadge.vue
@@ -14,11 +14,14 @@
 import { computed } from "vue";
 import { startCase } from "lodash";
 import { getCategoryLabel } from "@/api/categories";
-import type { DirectionalAssociation } from "@/api/model";
+import {
+  AssociationDirectionEnum,
+  type DirectionalAssociation,
+} from "@/api/model";
 
 type Props = {
-  /** current predicate */
-  association: DirectionalAssociation;
+  /** current association */
+  association: Partial<DirectionalAssociation>;
   /** whether to display arrows vertically */
   vertical?: boolean;
 };
@@ -26,7 +29,15 @@ type Props = {
 const props = defineProps<Props>();
 
 /** direction of arrows */
-const arrowDirection = computed(() => (props.vertical ? "down" : "right"));
+const arrowDirection = computed(() =>
+  props.association.direction === AssociationDirectionEnum.incoming
+    ? props.vertical
+      ? "up"
+      : "left"
+    : props.vertical
+    ? "down"
+    : "right",
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
index 6f3a2a3c2..f32774979 100644
--- a/frontend/src/components/AppSection.vue
+++ b/frontend/src/components/AppSection.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-  <section class="section" :data-width="width" :data-design="design">
+  <section :class="['section', width, design]">
     <slot />
   </section>
 </template>
@@ -35,19 +35,19 @@ defineSlots<Slots>();
   text-align: center;
   transition: background $fast;
 
-  &[data-width="full"] {
+  &.full {
     padding: 50px 40px;
   }
 
-  &[data-width="medium"] {
+  &.medium {
     padding: 50px max(40px, calc((100% - $section) / 2));
   }
 
-  &[data-width="big"] {
+  &.big {
     padding: 50px max(40px, calc((100% - $section-big) / 2));
   }
 
-  &[data-design="normal"] {
+  &.normal {
     &:nth-child(odd) {
       background: $white;
     }
@@ -57,7 +57,7 @@ defineSlots<Slots>();
     }
   }
 
-  &[data-design="fill"] {
+  &.fill {
     background: $theme-light;
   }
 
diff --git a/frontend/src/components/AppSelectAutocomplete.vue b/frontend/src/components/AppSelectAutocomplete.vue
index c4200eb37..eb9f24036 100644
--- a/frontend/src/components/AppSelectAutocomplete.vue
+++ b/frontend/src/components/AppSelectAutocomplete.vue
@@ -62,13 +62,11 @@
           :id="`option-${id}-${index}`"
           :key="index"
           v-tooltip="option.tooltip"
-          class="option"
+          :class="['option', { highlighted: index === highlighted }]"
           role="option"
           :aria-selected="true"
-          :data-highlighted="index === highlighted"
           tabindex="0"
           @click.prevent="() => select(option.label)"
-          @mouseenter.capture="highlighted = index"
           @mousedown.prevent=""
           @focusin="() => null"
           @keydown="() => null"
@@ -146,10 +144,10 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 /** unique id for instance of component */
-const id = ref(uniqueId());
+const id = uniqueId();
 /** currently searched text */
 const search = ref("");
-/** index of option that is highlighted */
+/** index of option that is highlighted (keyboard controls) */
 const highlighted = ref(0);
 /** whether input box focused and dropdown expanded */
 const expanded = ref(false);
@@ -281,7 +279,7 @@ watch(search, () => {
 watch(highlighted, () => {
   /** scroll to highlighted in dropdown */
   document
-    .querySelector(`#option-${id.value}-${highlighted.value} > *`)
+    .querySelector(`#option-${id}-${highlighted.value} > *`)
     ?.scrollIntoView({ block: "nearest" });
 });
 </script>
@@ -328,7 +326,8 @@ watch(highlighted, () => {
   transition: background $fast;
 }
 
-.option[data-highlighted="true"] {
+.option:hover,
+.option.highlighted {
   background: $light-gray;
 }
 
diff --git a/frontend/src/components/AppSelectMulti.vue b/frontend/src/components/AppSelectMulti.vue
index 7f9979151..74fd4ab18 100644
--- a/frontend/src/components/AppSelectMulti.vue
+++ b/frontend/src/components/AppSelectMulti.vue
@@ -16,12 +16,16 @@
       :is="design === 'small' ? 'AppButton' : 'button'"
       :id="`select-${id}`"
       ref="anchor"
-      :class="design === 'normal' ? 'box' : ''"
+      :class="[
+        {
+          notification: !allSelected && !noneSelected,
+          box: design === 'normal',
+        },
+      ]"
       :aria-label="name"
       :aria-expanded="expanded"
       :aria-controls="`list-${id}`"
       aria-haspopup="listbox"
-      :data-notification="!allSelected && !noneSelected"
       icon="filter"
       design="small"
       @click="onClick"
@@ -30,14 +34,14 @@
     >
       <template v-if="design === 'normal'">
         <span class="box-label">
-          {{ startCase(name) }}
+          {{ name }}
           <span class="box-more">
             <template v-if="selected.length === 0">none selected</template>
             <template v-else-if="selected.length === options.length">
               all selected
             </template>
             <template v-else-if="selected.length === 1">
-              {{ options[selected[0]]?.id }}
+              {{ options[selected[0]]?.label || options[selected[0]]?.id }}
             </template>
             <template v-else>{{ selected.length }} selected</template>
           </span>
@@ -67,22 +71,20 @@
         <!-- select all -->
         <div
           :id="`option-${id}--1`"
-          class="option"
+          :class="['option', { highlighted: highlighted === -1 }]"
           role="option"
           :aria-label="allSelected ? 'Deselect all' : 'Select all'"
           :aria-selected="allSelected"
-          :data-selected="allSelected"
-          :data-highlighted="highlighted === -1"
           tabindex="0"
           @click="() => toggleSelect(-1)"
-          @mouseenter="highlighted = -1"
           @mousedown.prevent=""
           @focusin="() => null"
           @keydown="() => null"
         >
-          <span class="option-icon">
-            <AppIcon :icon="allSelected ? 'square-check' : 'square'" />
-          </span>
+          <AppIcon
+            :icon="allSelected ? 'square-check' : 'square'"
+            class="option-check"
+          />
           <span class="option-label truncate">All</span>
           <span class="option-count"></span>
         </div>
@@ -95,22 +97,20 @@
           :id="`option-${id}-${index}`"
           :key="index"
           v-tooltip="option.tooltip"
-          class="option"
+          :class="['option', { highlighted: highlighted === -1 }]"
           role="option"
           :aria-selected="selected.includes(index)"
-          :data-selected="selected.includes(index)"
-          :data-highlighted="index === highlighted"
           tabindex="0"
           @click="(event) => toggleSelect(index, event.shiftKey)"
-          @mouseenter.capture="highlighted = index"
           @mousedown.prevent=""
           @focusin="() => null"
           @keydown="() => null"
         >
           <AppIcon
             :icon="selected.includes(index) ? 'square-check' : 'square'"
-            class="option-icon"
+            class="option-check"
           />
+          <AppIcon v-if="option.icon" :icon="option.icon" class="option-icon" />
           <span class="option-label truncate">
             {{ option.label || option.id }}
           </span>
@@ -132,6 +132,8 @@ export type Option = {
   id: string;
   /** display label */
   label?: string;
+  /** icon */
+  icon?: string;
   /** count col */
   count?: number;
   /** tooltip on hover */
@@ -143,7 +145,7 @@ export type Options = Option[];
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
-import { isEqual, startCase, uniqueId } from "lodash";
+import { isEqual, uniqueId } from "lodash";
 import { useFloating } from "@/util/composables";
 import { wrap } from "@/util/math";
 
@@ -174,14 +176,14 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 /** unique id for instance of component */
-const id = ref(uniqueId());
+const id = uniqueId();
 /** whether dropdown is open */
 const expanded = ref(false);
 /** array of indices of selected options */
 const selected = ref<number[]>([]);
 /** selected state when dropdown was opened */
 const original = ref<number[]>([]);
-/** index of option that is highlighted */
+/** index of option that is highlighted (keyboard controls) */
 const highlighted = ref(0);
 
 /** anchor element */
@@ -222,7 +224,7 @@ function onClick() {
   /** toggle dropdown */
   expanded.value ? close() : open();
   /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus */
-  document.querySelector<HTMLElement>(`#select-${id.value}`)?.focus();
+  document.querySelector<HTMLElement>(`#select-${id}`)?.focus();
 }
 
 /** when button blurred */
@@ -277,23 +279,29 @@ function getModel(): Options {
 }
 
 /** select or deselect option(s) */
-function toggleSelect(index = -1, shift = false) {
-  /** toggle all */
+function toggleSelect(index = -1, solo = false) {
+  /**
+   * if all selected, and individual option clicked, start by selecting just
+   * clicked
+   */
+  if (index !== -1 && allSelected.value) solo = true;
+
+  /** toggle all options */
   if (index === -1) {
     if (allSelected.value) selected.value = [];
     else
       selected.value = Array(props.options.length)
         .fill(0)
         .map((_, index) => index);
-  } else if (shift) {
-    /** solo/un-solo one */
+  } else if (solo) {
+    /** solo/un-solo one option */
     if (isEqual(selected.value, [index]))
       selected.value = Array(props.options.length)
         .fill(0)
         .map((_, index) => index);
     else selected.value = [index];
   } else {
-    /** toggle one */
+    /** toggle one option */
     if (selected.value.includes(index))
       selected.value = selected.value.filter((value) => value !== index);
     else selected.value.push(index);
@@ -324,7 +332,7 @@ watch(
   () =>
     /** scroll to highlighted in dropdown */
     document
-      .querySelector(`#option-${id.value}-${highlighted.value} > *`)
+      .querySelector(`#option-${id}-${highlighted.value} > *`)
       ?.scrollIntoView({ block: "nearest" }),
 );
 
@@ -385,7 +393,8 @@ const noneSelected = computed(() => !selected.value.length);
   transition: background $fast;
 }
 
-.option[data-highlighted="true"] {
+.option:hover,
+.option.highlighted {
   background: $light-gray;
 }
 
@@ -393,11 +402,15 @@ const noneSelected = computed(() => !selected.value.length);
   height: 10px;
 }
 
-.option-icon {
+.option-check {
   color: $theme;
   font-size: 1.2rem;
 }
 
+.option-icon {
+  color: $dark-gray;
+}
+
 .option-label {
   flex-grow: 1;
   justify-content: flex-start;
diff --git a/frontend/src/components/AppSelectSingle.vue b/frontend/src/components/AppSelectSingle.vue
index 732bac9b0..93571c099 100644
--- a/frontend/src/components/AppSelectSingle.vue
+++ b/frontend/src/components/AppSelectSingle.vue
@@ -26,7 +26,7 @@
     >
       <AppIcon v-if="modelValue?.icon" :icon="modelValue?.icon" />
       <span class="box-label">{{
-        startCase(modelValue?.label || modelValue?.id || "")
+        modelValue?.label || modelValue?.id || ""
       }}</span>
       <AppIcon :icon="expanded ? 'angle-up' : 'angle-down'" />
     </button>
@@ -49,14 +49,17 @@
           :id="`option-${id}-${index}`"
           :key="index"
           v-tooltip="option.tooltip"
-          class="option"
+          :class="[
+            'option',
+            {
+              selected: selected === index,
+              highlighted: highlighted === index,
+            },
+          ]"
           role="option"
           :aria-selected="selected === index"
-          :data-selected="selected === index"
-          :data-highlighted="index === highlighted"
           tabindex="0"
           @click="selected = index"
-          @mouseenter.capture="highlighted = index"
           @mousedown.prevent=""
           @focusin="() => null"
           @keydown="() => null"
@@ -93,7 +96,7 @@ export type Options = Option[];
 
 <script setup lang="ts">
 import { nextTick, ref, watch } from "vue";
-import { startCase, uniqueId } from "lodash";
+import { uniqueId } from "lodash";
 import { useFloating } from "@/util/composables";
 import { wrap } from "@/util/math";
 
@@ -116,12 +119,12 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 /** unique id for instance of component */
-const id = ref(uniqueId());
+const id = uniqueId();
 /** whether dropdown is open */
 const expanded = ref(false);
 /** index of option that is selected */
 const selected = ref(getSelected());
-/** index of option that is highlighted */
+/** index of option that is highlighted (keyboard controls) */
 const highlighted = ref(0);
 
 /** target element */
@@ -153,7 +156,7 @@ function onClick() {
   /** toggle dropdown */
   expanded.value ? close() : open();
   /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus */
-  document.querySelector<HTMLElement>(`#select-${id.value}`)?.focus();
+  document.querySelector<HTMLElement>(`#select-${id}`)?.focus();
 }
 
 /** when button blurred */
@@ -225,7 +228,7 @@ watch(
   () =>
     /** scroll to highlighted in dropdown */
     document
-      .querySelector(`#option-${id.value}-${highlighted.value}`)
+      .querySelector(`#option-${id}-${highlighted.value}`)
       ?.scrollIntoView({ block: "nearest" }),
 );
 
@@ -284,11 +287,12 @@ watch(
   transition: background $fast;
 }
 
-.option[data-selected="true"] {
+.option.selected {
   background: $theme-light;
 }
 
-.option[data-highlighted="true"] {
+.option:hover,
+.option.highlighted {
   background: $light-gray;
 }
 
diff --git a/frontend/src/components/AppSelectTags.vue b/frontend/src/components/AppSelectTags.vue
index 7ccc56e93..839b2676d 100644
--- a/frontend/src/components/AppSelectTags.vue
+++ b/frontend/src/components/AppSelectTags.vue
@@ -10,12 +10,7 @@
 <template>
   <div class="select-tags">
     <!-- select box -->
-    <div
-      :id="`select-${id}`"
-      ref="target"
-      class="box"
-      :data-expanded="expanded"
-    >
+    <div :id="`select-${id}`" ref="target" :class="['box', { expanded }]">
       <!-- deselect button -->
       <AppButton
         v-for="(option, index) in selected"
@@ -100,13 +95,11 @@
           :id="`option-${id}-${index}`"
           :key="index"
           v-tooltip="option.tooltip"
-          class="option"
+          :class="['option', { highlighted: highlighted === index }]"
           role="option"
           :aria-selected="true"
-          :data-highlighted="index === highlighted"
           tabindex="0"
           @click="select(option)"
-          @mouseenter.capture="highlighted = index"
           @mousedown.prevent=""
           @focusin="() => null"
           @keydown="() => null"
@@ -209,12 +202,12 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 /** unique id for instance of component */
-const id = ref(uniqueId());
+const id = uniqueId();
 /** array of selected options */
 const selected = ref<Options>([]);
 /** currently searched text */
 const search = ref("");
-/** index of option that is highlighted */
+/** index of option that is highlighted (keyboard controls) */
 const highlighted = ref(0);
 /** whether input box focused and dropdown expanded */
 const expanded = ref(false);
@@ -393,7 +386,7 @@ watch(
 watch(highlighted, () => {
   /** scroll to highlighted in dropdown */
   document
-    .querySelector(`#option-${id.value}-${highlighted.value} > *`)
+    .querySelector(`#option-${id}-${highlighted.value} > *`)
     ?.scrollIntoView({ block: "nearest" });
 });
 </script>
@@ -420,7 +413,7 @@ watch(highlighted, () => {
 }
 
 .box:hover,
-.box[data-expanded="true"] {
+.box.expanded {
   box-shadow: $outline;
 }
 
@@ -459,7 +452,8 @@ watch(highlighted, () => {
   transition: background $fast;
 }
 
-.option[data-highlighted="true"] {
+.option:hover,
+.option.highlighted {
   background: $light-gray;
 }
 
diff --git a/frontend/src/components/AppStatus.vue b/frontend/src/components/AppStatus.vue
index 80588a3a7..4dd191e20 100644
--- a/frontend/src/components/AppStatus.vue
+++ b/frontend/src/components/AppStatus.vue
@@ -6,8 +6,7 @@
   <AppLink
     v-tooltip="code === 'error' ? 'See dev console for more details' : ''"
     :to="link || ''"
-    class="status"
-    :data-code="code || ''"
+    :class="['status', code]"
     :aria-label="code || ''"
   >
     <AppIcon class="icon" :icon="icon" />
@@ -79,27 +78,27 @@ const icon = computed(() => icons[props.code]);
   font-size: 1.5rem;
 }
 
-.status[data-code="loading"] .icon {
+.status.loading .icon {
   color: $gray;
 }
 
-.status[data-code="paused"] .icon {
+.status.paused .icon {
   color: $gray;
 }
 
-.status[data-code="success"] .icon {
+.status.success .icon {
   color: $success;
 }
 
-.status[data-code="warning"] .icon {
+.status.warning .icon {
   color: $gray;
 }
 
-.status[data-code="error"] .icon {
+.status.error .icon {
   color: $error;
 }
 
-.status[data-code="unknown"] .icon {
+.status.unknown .icon {
   color: $gray;
 }
 
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index 49e843a6c..703e8d6d7 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -7,196 +7,196 @@
 -->
 
 <template>
-  <div class="container">
-    <!-- table data -->
-    <AppFlex direction="col">
-      <div
-        class="wrapper"
-        :data-left="arrivedState.left"
-        :data-right="arrivedState.right"
-        :data-expanded="expanded"
-      >
-        <div class="left-scroll">
-          <AppIcon icon="angle-left" />
-        </div>
-        <div class="right-scroll">
-          <AppIcon icon="angle-right" />
-        </div>
-
-        <div ref="table" class="scroll">
-          <table
-            class="table"
-            :aria-colcount="cols.length"
-            :aria-rowcount="rows.length"
-            :style="{ gridTemplateColumns: widths }"
-          >
-            <!-- head -->
-            <thead class="thead">
-              <tr class="tr">
-                <th
-                  v-for="(col, colIndex) in cols"
-                  :key="colIndex"
-                  class="th"
-                  :aria-sort="ariaSort"
-                  :data-align="col.align || 'left'"
-                  :data-divider="col.slot === 'divider'"
-                >
-                  <span>
-                    {{ col.heading }}
-                  </span>
-                  <AppButton
-                    v-if="col.sortable"
-                    v-tooltip="'Sort by ' + col.heading"
-                    :icon="
-                      'arrow-' +
-                      (sort?.key === col.key ? sort?.direction : 'down')
-                    "
-                    design="small"
-                    :color="sort?.key === col.key ? 'primary' : 'secondary'"
-                    :style="{ opacity: sort?.key === col.key ? 1 : 0.35 }"
-                    @click.stop="emitSort(col)"
-                  />
-                  <AppSelectMulti
-                    v-if="
-                      col.key &&
-                      selectedFilters?.[col.key] &&
-                      filterOptions?.[col.key]?.length
-                    "
-                    v-tooltip="'Filter by ' + col.heading"
-                    :name="'Filter by ' + col.heading"
-                    :options="filterOptions[col.key]"
-                    :model-value="selectedFilters[col.key]"
-                    design="small"
-                    @change="(value) => emitFilter(col.key, value)"
-                  />
-                </th>
-              </tr>
-            </thead>
-
-            <!-- body -->
-            <tbody class="tbody">
-              <tr v-for="(row, rowIndex) in rows" :key="rowIndex" class="tr">
-                <td
-                  v-for="(col, colIndex) in cols"
-                  :key="colIndex"
-                  class="td"
-                  :aria-rowindex="rowIndex + 1"
-                  :aria-colindex="colIndex + 1"
-                  :data-align="col.align || 'left'"
-                  :data-divider="col.slot === 'divider'"
-                >
-                  <!-- if col has slot name, use to custom format/template cell -->
-                  <slot
-                    v-if="col.slot && $slots[col.slot]"
-                    :name="col.slot"
-                    :row="row"
-                    :col="col"
-                    :cell="col.key ? row[col.key] : null"
-                  />
-                  <!-- otherwise, just display raw cell value -->
-                  <template v-else-if="col.key">
-                    {{ row[col.key] }}
-                  </template>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+  <!-- table data -->
+  <AppFlex direction="col" :class="['container', { expanded }]">
+    <div
+      :class="[
+        'wrapper',
+        { 'at-left': arrivedState.left, 'at-right': arrivedState.right },
+      ]"
+    >
+      <div class="left-scroll">
+        <AppIcon icon="angle-left" />
+      </div>
+      <div class="right-scroll">
+        <AppIcon icon="angle-right" />
       </div>
 
-      <div class="controls">
-        <!-- left side controls -->
-        <div>
-          <template v-if="showControls">
-            <span>Per page</span>
-            <AppSelectSingle
-              name="Rows per page"
-              :options="[
-                { id: '5' },
-                { id: '10' },
-                { id: '20' },
-                { id: '50' },
-                { id: '100' },
-                { id: '500' },
-              ]"
-              :model-value="{ id: String(perPage || 5) }"
-              @update:model-value="(value) => emitPerPage(value.id)"
-            />
-          </template>
-        </div>
-
-        <!-- center controls -->
-        <div>
-          <template v-if="showControls">
-            <AppButton
-              v-tooltip="'Go to first page'"
-              :disabled="start <= 0"
-              icon="angle-double-left"
-              design="small"
-              @click="clickFirst"
-            />
-            <AppButton
-              v-tooltip="'Go to previous page'"
-              :disabled="start - perPage < 0"
-              icon="angle-left"
-              design="small"
-              @click="clickPrev"
-            />
-          </template>
-          <template v-if="total > 0">
-            <span v-if="showControls"
-              >{{ start + 1 }} &mdash; {{ end }} of {{ total }}</span
-            >
-            <span v-else>{{ total }} row(s)</span>
-          </template>
-          <span v-else>no data</span>
-          <template v-if="showControls">
-            <AppButton
-              v-tooltip="'Go to next page'"
-              :disabled="start + perPage > total"
-              icon="angle-right"
-              design="small"
-              @click="clickNext"
-            />
-            <AppButton
-              v-tooltip="'Go to last page'"
-              :disabled="start + perPage > total"
-              icon="angle-double-right"
-              design="small"
-              @click="clickLast"
-            />
-          </template>
-        </div>
-
-        <!-- right side controls -->
-        <div>
-          <AppTextbox
-            v-if="showControls"
-            v-tooltip="'Search table data'"
-            class="search"
-            icon="search"
-            :model-value="search"
-            @debounce="emitSearch"
-            @change="emitSearch"
+      <div ref="table" class="scroll">
+        <table
+          class="table"
+          :aria-colcount="cols.length"
+          :aria-rowcount="rows.length"
+          :style="{ gridTemplateColumns: widths }"
+        >
+          <!-- head -->
+          <thead class="thead">
+            <tr class="tr">
+              <th
+                v-for="(col, colIndex) in cols"
+                :key="colIndex"
+                :class="[
+                  'th',
+                  col.align || 'left',
+                  { divider: col.slot === 'divider' },
+                ]"
+                :aria-sort="ariaSort"
+              >
+                <span>
+                  {{ col.heading }}
+                </span>
+                <AppButton
+                  v-if="col.sortable"
+                  v-tooltip="'Sort by ' + col.heading"
+                  :icon="
+                    'arrow-' +
+                    (sort?.key === col.key ? sort?.direction : 'down')
+                  "
+                  design="small"
+                  :color="sort?.key === col.key ? 'primary' : 'secondary'"
+                  :style="{ opacity: sort?.key === col.key ? 1 : 0.35 }"
+                  @click.stop="emitSort(col)"
+                />
+                <AppSelectMulti
+                  v-if="
+                    col.key &&
+                    selectedFilters?.[col.key] &&
+                    filterOptions?.[col.key]?.length
+                  "
+                  v-tooltip="'Filter by ' + col.heading"
+                  :name="'Filter by ' + col.heading"
+                  :options="filterOptions[col.key]"
+                  :model-value="selectedFilters[col.key]"
+                  design="small"
+                  @change="(value) => emitFilter(col.key, value)"
+                />
+              </th>
+            </tr>
+          </thead>
+
+          <!-- body -->
+          <tbody class="tbody">
+            <tr v-for="(row, rowIndex) in rows" :key="rowIndex" class="tr">
+              <td
+                v-for="(col, colIndex) in cols"
+                :key="colIndex"
+                :class="[
+                  'td',
+                  col.align || 'left',
+                  { divider: col.slot === 'divider' },
+                ]"
+                :aria-rowindex="rowIndex + 1"
+                :aria-colindex="colIndex + 1"
+              >
+                <!-- if col has slot name, use to custom format/template cell -->
+                <slot
+                  v-if="col.slot && $slots[col.slot]"
+                  :name="col.slot"
+                  :row="row"
+                  :col="col"
+                  :cell="col.key ? row[col.key] : null"
+                />
+                <!-- otherwise, just display raw cell value -->
+                <template v-else-if="col.key">
+                  {{ row[col.key] }}
+                </template>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="controls">
+      <!-- left side controls -->
+      <div>
+        <template v-if="showControls">
+          <span>Per page</span>
+          <AppSelectSingle
+            name="Rows per page"
+            :options="[
+              { id: '5' },
+              { id: '10' },
+              { id: '20' },
+              { id: '50' },
+              { id: '100' },
+              { id: '500' },
+            ]"
+            :model-value="{ id: String(perPage || 5) }"
+            @update:model-value="(value) => emitPerPage(value.id)"
+          />
+        </template>
+      </div>
+
+      <!-- center controls -->
+      <div>
+        <template v-if="showControls">
+          <AppButton
+            v-tooltip="'Go to first page'"
+            :disabled="start <= 0"
+            icon="angle-double-left"
+            design="small"
+            @click="clickFirst"
+          />
+          <AppButton
+            v-tooltip="'Go to previous page'"
+            :disabled="start - perPage < 0"
+            icon="angle-left"
+            design="small"
+            @click="clickPrev"
           />
+        </template>
+        <template v-if="total > 0">
+          <span v-if="showControls"
+            >{{ start + 1 }} &mdash; {{ end }} of {{ total }}</span
+          >
+          <span v-else>{{ total }} row(s)</span>
+        </template>
+        <span v-else>no data</span>
+        <template v-if="showControls">
           <AppButton
-            v-tooltip="'Download table data'"
-            icon="download"
+            v-tooltip="'Go to next page'"
+            :disabled="start + perPage > total"
+            icon="angle-right"
             design="small"
-            @click="emitDownload"
+            @click="clickNext"
           />
           <AppButton
-            v-tooltip="
-              expanded ? 'Collapse table' : 'Expand table to full width'
-            "
-            :icon="expanded ? 'minimize' : 'maximize'"
+            v-tooltip="'Go to last page'"
+            :disabled="start + perPage > total"
+            icon="angle-double-right"
             design="small"
-            @click="expanded = !expanded"
+            @click="clickLast"
           />
-        </div>
+        </template>
+      </div>
+
+      <!-- right side controls -->
+      <div>
+        <AppTextbox
+          v-if="showControls"
+          v-tooltip="'Search table data'"
+          class="search"
+          icon="search"
+          :model-value="search"
+          @debounce="emitSearch"
+          @change="emitSearch"
+        />
+        <AppButton
+          v-tooltip="'Download table data'"
+          icon="download"
+          design="small"
+          @click="emitDownload"
+        />
+        <AppButton
+          v-tooltip="expanded ? 'Collapse table' : 'Expand table to full width'"
+          :icon="expanded ? 'minimize' : 'maximize'"
+          design="small"
+          @click="expanded = !expanded"
+        />
       </div>
-    </AppFlex>
-  </div>
+    </div>
+  </AppFlex>
 </template>
 
 <script lang="ts">
@@ -220,7 +220,7 @@ export type Cols<Key extends string> = {
    * width to apply to heading cell, in any valid css grid col width (px, fr,
    * auto, minmax, etc)
    */
-  width?: string;
+  width?: number;
   /** whether to allow sorting of column */
   sortable?: boolean;
 }[];
@@ -234,7 +234,7 @@ export type Sort<Key extends string = string> = {
 
 <script setup lang="ts" generic="Datum extends object">
 import { computed, nextTick, onMounted, ref, watch, type VNode } from "vue";
-import { useResizeObserver, useScroll } from "@vueuse/core";
+import { useLocalStorage, useResizeObserver, useScroll } from "@vueuse/core";
 import type { Options } from "./AppSelectMulti.vue";
 import AppSelectMulti from "./AppSelectMulti.vue";
 import AppSelectSingle from "./AppSelectSingle.vue";
@@ -245,6 +245,8 @@ import { closeToc } from "./TheTableOfContents.vue";
 type Keys = Extract<keyof Datum, string>;
 
 type Props = {
+  /** unique id for table */
+  id: string;
   /** info for each column of table */
   cols: Cols<Keys>;
   /** list of table rows, i.e. the table data */
@@ -311,7 +313,7 @@ defineSlots<{
 }>();
 
 /** whether table is expanded to be full width */
-const expanded = ref(false);
+const expanded = useLocalStorage(`${props.id}-table-expanded`, false);
 /** table reference */
 const table = ref<HTMLElement>();
 
@@ -327,11 +329,6 @@ onMounted(updateScroll);
 watch(expanded, updateScroll);
 useResizeObserver(table, updateScroll);
 
-/** close table of contents when expanding */
-watch(expanded, () => {
-  if (expanded.value) closeToc();
-});
-
 /** when user clicks to first page */
 function clickFirst() {
   emit("update:start", 0);
@@ -405,7 +402,11 @@ const end = computed((): number => props.start + props.rows.length);
 
 /** grid column template widths */
 const widths = computed((): string =>
-  props.cols.map((col) => col.width || "auto").join(" "),
+  props.cols
+    .map((col) =>
+      expanded.value ? `minmax(max-content, 99999px)` : `${col.width || 1}fr`,
+    )
+    .join(" "),
 );
 
 /** aria sort direction attribute */
@@ -414,16 +415,35 @@ 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 {
-  width: 100%;
+  &.expanded {
+    left: 0;
+    width: calc(100vw - 100px);
+    transform: translateX(0);
+
+    .td,
+    .th {
+      width: 100%;
+      max-width: unset;
+    }
+  }
 }
 
 .wrapper {
   position: relative;
-  width: 100%;
+  max-width: 100%;
 
   .left-scroll,
   .right-scroll {
@@ -471,25 +491,25 @@ const ariaSort = computed(() => {
     overflow-x: auto;
   }
 
-  &[data-left="false"] .left-scroll {
+  &:not(.at-left) .left-scroll {
     opacity: 1;
   }
 
-  &[data-right="false"] .right-scroll {
+  &:not(.at-right) .right-scroll {
     opacity: 1;
   }
 
-  &[data-left="false"][data-right="true"] .scroll {
+  &:not(.at-left).at-right .scroll {
     -webkit-mask-image: linear-gradient(to left, black 75%, transparent);
     mask-image: linear-gradient(to left, black 75%, transparent);
   }
 
-  &[data-right="false"][data-left="true"] .scroll {
+  &:not(.at-right).at-left .scroll {
     -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
     mask-image: linear-gradient(to right, black 75%, transparent);
   }
 
-  &[data-left="false"][data-right="false"] .scroll {
+  &:not(.at-left):not(.at-right) .scroll {
     -webkit-mask-image: linear-gradient(
       to left,
       transparent,
@@ -505,21 +525,11 @@ const ariaSort = computed(() => {
       transparent
     );
   }
-
-  &[data-expanded="true"] {
-    left: 0;
-    width: calc(100vw - 80px);
-    transform: translateX(0);
-
-    .td,
-    .th {
-      max-width: unset;
-    }
-  }
 }
 
 .table {
-  display: inline-grid;
+  display: grid;
+  min-width: $section;
   border-collapse: collapse;
 }
 
@@ -539,17 +549,17 @@ const ariaSort = computed(() => {
   padding: 5px 10px;
   gap: 10px;
 
-  &[data-align="left"] {
+  &.left {
     justify-content: flex-start;
     text-align: left;
   }
 
-  &[data-align="center"] {
+  &.center {
     justify-content: center;
     text-align: center;
   }
 
-  &[data-align="right"] {
+  &.right {
     justify-content: flex-end;
     text-align: right;
 
@@ -558,7 +568,7 @@ const ariaSort = computed(() => {
     }
   }
 
-  &[data-divider="true"] {
+  &.divider {
     width: 2px;
     margin: 0 5px;
     padding: 0;
@@ -585,8 +595,7 @@ const ariaSort = computed(() => {
 .controls {
   display: flex;
   justify-content: space-between;
-  width: 100%;
-  gap: 10px;
+  gap: 20px 40px;
 
   & > * {
     display: flex;
@@ -595,7 +604,7 @@ const ariaSort = computed(() => {
     gap: 10px;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 850px) {
     flex-direction: column;
   }
 
diff --git a/frontend/src/components/AppTabs.vue b/frontend/src/components/AppTabs.vue
index a2447dd9d..201562bd1 100644
--- a/frontend/src/components/AppTabs.vue
+++ b/frontend/src/components/AppTabs.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { uniqueId } from "lodash";
 import { wrap } from "@/util/math";
@@ -87,7 +87,7 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 /** unique id for instance of component */
-const id = ref(uniqueId());
+const id = uniqueId();
 
 /** when user clicks on button */
 async function onClick(id: string) {
@@ -103,19 +103,23 @@ async function onKeydown(event: KeyboardEvent) {
     /** move selected tab */
     let index = props.tabs.findIndex((tab) => tab.id === props.modelValue);
 
-    /** go forward until we find a not disabled tab */
-    const forward = (index: number) =>
-      props.tabs.findIndex((tab, i) => i >= index && !tab.disabled) ||
-      props.tabs.length - 1;
-    /** go backward until we find a not disabled tab */
-    const backward = (index: number) =>
-      props.tabs.findLastIndex((tab, i) => i <= index && !tab.disabled) || 0;
+    /** keep index within bounds */
+    const wrapIndex = (index: number) => wrap(index, 0, props.tabs.length - 1);
+
+    /** go forward/backward until we find a non-disabled tab */
+    const skip = (index: number, direction: number) => {
+      index = wrapIndex(index);
+      let limit = props.tabs.length;
+      while (props.tabs[index].disabled && --limit > 0)
+        index = wrapIndex(index + direction);
+      return index;
+    };
 
     /** handle key strokes */
-    if (event.key === "ArrowLeft") index = backward(index - 1);
-    if (event.key === "ArrowRight") index = forward(index + 1);
-    if (event.key === "Home") index = forward(0);
-    if (event.key === "End") index = backward(props.tabs.length - 1);
+    if (event.key === "ArrowLeft") index = skip(index - 1, -1);
+    if (event.key === "ArrowRight") index = skip(index + 1, 1);
+    if (event.key === "Home") index = skip(0, 1);
+    if (event.key === "End") index = skip(props.tabs.length - 1, -1);
 
     /** update selected, wrapping beyond -1 or options length */
     emit(
@@ -139,7 +143,7 @@ watch(
   () => props.modelValue,
   async () => {
     /** focus the selected tab */
-    // const selector = `#tab-${id.value}-${props.modelValue}`;
+    // const selector = `#tab-${id}-${props.modelValue}`;
     // const button = document?.querySelector<HTMLButtonElement>(selector);
     // button?.focus();
 
diff --git a/frontend/src/components/AppTextbox.vue b/frontend/src/components/AppTextbox.vue
index 7f8ad936a..3a719caa1 100644
--- a/frontend/src/components/AppTextbox.vue
+++ b/frontend/src/components/AppTextbox.vue
@@ -11,15 +11,13 @@
     <div ref="textbox" class="textbox">
       <AppInput
         ref="input"
-        class="input"
+        :class="['input', { multi, 'has-icon': icon }]"
         v-bind="$attrs"
         :multi="multi"
         :model-value="modelValue"
         :placeholder="placeholder"
         :required="required"
         :debounce="debounce"
-        :data-multi="!!multi"
-        :data-icon="!!icon"
         @update:model-value="(...args) => $emit('update:modelValue', ...args)"
         @debounce="(...args) => $emit('debounce', ...args)"
         @change="(...args) => $emit('change', ...args)"
@@ -155,13 +153,13 @@ $height: 40px;
   transition: box-shadow $fast;
 }
 
-.input[data-multi="false"] {
+.input:not(.multi) {
   height: $height;
   padding: 0 calc($height * 0.25);
   line-height: $spacing;
 }
 
-.input[data-multi="true"] {
+.input.multi {
   min-width: 100%;
   max-width: 100%;
   height: calc($height * 4);
@@ -170,7 +168,7 @@ $height: 40px;
   line-height: $spacing;
 }
 
-.input[data-icon="true"] {
+.input.has-icon {
   padding-right: calc($height * 0.85);
 }
 
diff --git a/frontend/src/components/AppTile.vue b/frontend/src/components/AppTile.vue
index 02e6ceed9..09f5caf40 100644
--- a/frontend/src/components/AppTile.vue
+++ b/frontend/src/components/AppTile.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <div class="tile" :data-design="design">
+  <div :class="['tile', design]">
     <AppButton
       v-if="to"
       design="circle"
@@ -53,7 +53,7 @@ withDefaults(defineProps<Props>(), { to: "", subtitle: "", design: "big" });
   color: $off-black;
 }
 
-.tile[data-design="small"] {
+.tile.small {
   width: 160px;
   gap: 10px;
 
diff --git a/frontend/src/components/AppUpload.vue b/frontend/src/components/AppUpload.vue
index 506975cf5..ff08366c2 100644
--- a/frontend/src/components/AppUpload.vue
+++ b/frontend/src/components/AppUpload.vue
@@ -5,10 +5,9 @@
 <template>
   <AppButton
     v-tooltip="'Choose or drag & drop a file'"
-    class="button"
+    :class="['button', { drag }]"
     text="Upload"
     icon="upload"
-    :data-drag="drag"
     @click="onClick"
     @dragenter="drag = true"
     @dragleave="drag = false"
@@ -72,7 +71,7 @@ function onDrop(event: DragEvent) {
 </script>
 
 <style lang="scss" scoped>
-.button[data-drag="true"] {
+.button.drag {
   outline: dashed 2px $black;
   box-shadow: none !important;
 }
diff --git a/frontend/src/components/TheFooter.vue b/frontend/src/components/TheFooter.vue
index ad87dd30e..1a9ed7cf8 100644
--- a/frontend/src/components/TheFooter.vue
+++ b/frontend/src/components/TheFooter.vue
@@ -29,7 +29,7 @@ $wrap: 500px;
   align-items: center;
   justify-content: space-between;
   padding: 20px;
-  background: $theme-dark;
+  background: $theme;
   color: $white;
   font-size: 0.9rem;
 }
diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
index f1abdd7bf..125a9e6ee 100644
--- a/frontend/src/components/TheHeader.vue
+++ b/frontend/src/components/TheHeader.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <header ref="header" class="header" :data-home="home">
+  <header ref="header" :class="['header', { home }]">
     <!-- header background visualization -->
     <TheNexus v-if="home" />
 
@@ -13,8 +13,7 @@
       <AppLink
         v-tooltip="home ? '' : 'Homepage'"
         :to="home ? '' : '/'"
-        class="logo"
-        :data-home="home"
+        :class="['logo', { home }]"
       >
         <TheLogo class="image" />
         <!-- make logo text the h1 on homepage -->
@@ -40,7 +39,9 @@
     </div>
 
     <!-- navigation bar -->
-    <nav class="nav" :data-home="home" :data-expanded="expanded">
+    <nav :class="['nav', { home, expanded }]">
+      <TabSearch v-if="search" :minimal="true" :header-box="true" />
+
       <AppLink
         v-tooltip="'Dive right in and use Monarch'"
         class="link"
@@ -71,6 +72,7 @@ import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { onClickOutside } from "@vueuse/core";
 import TheLogo from "@/assets/TheLogo.vue";
+import TabSearch from "@/pages/explore/TabSearch.vue";
 import TheNexus from "./TheNexus.vue";
 import app from "../../package.json";
 
@@ -86,6 +88,11 @@ const header = ref<HTMLElement>();
 /** is home page (big) version */
 const home = computed((): boolean => route.name === "Home");
 
+/** whether to show search box */
+const search = computed(
+  (): boolean => route.name !== "Home" && route.name !== "Explore",
+);
+
 /** close nav */
 function close() {
   expanded.value = false;
@@ -99,7 +106,7 @@ onClickOutside(header, close);
 </script>
 
 <style lang="scss" scoped>
-$wrap: 600px;
+$wrap: 850px;
 
 /** header */
 
@@ -110,11 +117,11 @@ $wrap: 600px;
   top: 0;
   align-items: center;
   justify-content: space-between;
-  background: $theme-dark;
+  background: $theme;
   color: $white;
 }
 
-.header[data-home="true"] {
+.header.home {
   justify-content: center;
 }
 
@@ -123,13 +130,13 @@ $wrap: 600px;
     flex-direction: column;
   }
 
-  .header[data-home="true"] {
+  .header.home {
     justify-content: space-between;
   }
 }
 
 @media not all and (max-width: $wrap) {
-  .header[data-home="true"] {
+  .header.home {
     position: relative;
     min-height: 300px;
   }
@@ -211,7 +218,7 @@ $wrap: 600px;
 }
 
 @media not all and (max-width: $wrap) {
-  .logo[data-home="true"] {
+  .logo.home {
     flex-direction: column;
 
     .image {
@@ -229,12 +236,16 @@ $wrap: 600px;
 
 .nav {
   display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
   padding: 15px;
   gap: 10px;
 }
 
 .link {
   position: relative;
+  max-width: 100%;
   padding: 10px;
   color: $white;
   text-align: center;
@@ -262,22 +273,22 @@ $wrap: 600px;
 @media (max-width: $wrap) {
   .nav {
     position: unset;
-    flex-wrap: wrap;
-    justify-content: center;
+    flex-direction: column;
     margin-top: -10px;
   }
 
-  .nav[data-expanded="false"] {
+  .nav:not(.expanded) {
     display: none;
   }
 
   .link {
+    width: 200px;
     padding: 5px;
   }
 }
 
 @media not all and (max-width: $wrap) {
-  .nav[data-home="true"] {
+  .nav.home {
     position: absolute;
     top: 0;
     right: 0;
diff --git a/frontend/src/components/TheNexus.vue b/frontend/src/components/TheNexus.vue
index 6f04f06be..5801f7447 100644
--- a/frontend/src/components/TheNexus.vue
+++ b/frontend/src/components/TheNexus.vue
@@ -24,10 +24,10 @@ const size = 4;
 /** distance between dots */
 const gap = 50;
 
-/** color of elements at rest (10% white, 90% theme-dark) */
-const baseColor: Color = [25, 143, 154];
-/** color of element when pulsing (50% white, 50% theme-dark) */
-const pulseColor: Color = [127, 193, 199];
+/** color of elements at rest */
+const baseColor: Color = [185, 100, 30 + 3];
+/** color of element when pulsing */
+const pulseColor: Color = [185, 0, 100];
 
 /** 3d axis rotations */
 let rx = 0;
@@ -35,7 +35,7 @@ let ry = 0;
 let rxTarget = 0;
 let ryTarget = 0;
 
-/** efficient rgb tuple format */
+/** efficient hsl tuple format */
 type Color = [number, number, number];
 
 type Dot = {
@@ -52,7 +52,7 @@ type Link = {
   /** dots to link together */
   from: Dot;
   to: Dot;
-  /** target and actual color (in efficient rgb tuple format) */
+  /** target and actual color (in efficient hsl tuple format) */
   color: Color;
   colorTarget: Color;
 };
@@ -86,7 +86,7 @@ const generate = debounce(() => {
       if (
         /** eliminate some to make more "organic" and less "grid" */
         Math.random() > 0.4 &&
-        /** avoid direct center to make visual space for log */
+        /** avoid direct center to make visual space for logo */
         (Math.abs(x - width / 2) > gap * 2 || Math.abs(y - height / 2) > gap)
       ) {
         const angle = Math.random() * 360;
@@ -181,9 +181,13 @@ function draw() {
   if (!ctx) return;
 
   /** draw links */
-  for (const { from, to, color } of links) {
+  for (const {
+    from,
+    to,
+    color: [h, s, l],
+  } of links) {
     if (!from.projected || !to.projected) continue;
-    ctx.strokeStyle = "rgb(" + color.join(",") + ")";
+    ctx.strokeStyle = `hsl(${h} ${s}% ${l}%)`;
     ctx.lineWidth = size / 3;
     ctx.beginPath();
     ctx.moveTo(from.projected.x, from.projected.y);
@@ -192,9 +196,12 @@ function draw() {
   }
 
   /** draw dots */
-  for (const { projected, color } of dots) {
+  for (const {
+    projected,
+    color: [h, s, l],
+  } of dots) {
     if (!projected) continue;
-    ctx.fillStyle = "rgb(" + color.join(",") + ")";
+    ctx.fillStyle = `hsl(${h} ${s}% ${l}%)`;
     ctx.beginPath();
     ctx.arc(projected.x, projected.y, size, 0, 2 * Math.PI);
     ctx.fill();
@@ -210,9 +217,13 @@ function pulse() {
         ? entity.point
         : getMidpoint(entity.from.point, entity.to.point);
 
+    /** how fast pulse propagates outward */
+    const speed = 0.2;
+    /** how wide pulse "band" is */
+    const band = 1.5;
     /** time delays */
-    const speed = 5 / 10; /** how fast pulse propagates outward */
-    const start = dist(center.x - width / 2, center.y - height / 2) / speed;
+    const start =
+      dist(center.x - width / 2, center.y - height / 2) / speed / band;
     const reset = start + 100 / speed;
     /** set timers */
     window.setTimeout(() => (entity.colorTarget = [...pulseColor]), start);
diff --git a/frontend/src/components/TheSnackbar.vue b/frontend/src/components/TheSnackbar.vue
index aace63a0c..f42a0fe5b 100644
--- a/frontend/src/components/TheSnackbar.vue
+++ b/frontend/src/components/TheSnackbar.vue
@@ -84,7 +84,7 @@ useEventListener(window, "snackbar", onPush);
 
 @keyframes flash {
   0% {
-    background: $theme-dark;
+    background: $theme;
   }
   100% {
     background: $off-black;
diff --git a/frontend/src/components/TheTableOfContents.vue b/frontend/src/components/TheTableOfContents.vue
index 77e02695b..ae692300f 100644
--- a/frontend/src/components/TheTableOfContents.vue
+++ b/frontend/src/components/TheTableOfContents.vue
@@ -6,9 +6,8 @@
       direction="col"
       gap="none"
       align-h="stretch"
-      class="toc"
+      :class="['toc', { expanded }]"
       :style="{ top: nudge + 'px' }"
-      :data-expanded="expanded"
       role="doc-toc"
       aria-label="Page table of contents"
       @click.stop
@@ -38,8 +37,7 @@
           v-for="(entry, index) in entries"
           :key="index"
           :to="'#' + entry.id"
-          class="entry"
-          :data-active="active === index"
+          :class="['entry', { active: active === index }]"
           :aria-current="active === index"
           @click="active = index"
         >
@@ -189,7 +187,7 @@ useMutationObserver(
   box-shadow: $shadow;
 }
 
-.toc[data-expanded="true"] {
+.toc.expanded {
   width: 210px;
   max-width: calc(100vw - 40px);
 }
@@ -224,7 +222,7 @@ useMutationObserver(
   transition: background $fast;
 }
 
-.entry[data-active="true"] {
+.entry.active {
   background: $light-gray;
 }
 
diff --git a/frontend/src/global/breadcrumbs.ts b/frontend/src/global/breadcrumbs.ts
index e564659f8..7804ac730 100644
--- a/frontend/src/global/breadcrumbs.ts
+++ b/frontend/src/global/breadcrumbs.ts
@@ -1,10 +1,10 @@
 import { ref } from "vue";
-import type { Association, Node } from "@/api/model";
+import type { DirectionalAssociation, Node } from "@/api/model";
 import { parse } from "@/util/object";
 
-type Breadcrumb = {
-  node: Node;
-  predicate: Association["predicate"];
+export type Breadcrumb = {
+  node: Partial<Node>;
+  association: Partial<DirectionalAssociation>;
 };
 
 /** breadcrumbs object for breadcrumbs section on node page */
@@ -12,4 +12,7 @@ export const breadcrumbs = ref<Breadcrumb[]>([]);
 
 /** keep breadcrumbs global variable in sync with history.state.breadcrumbs */
 export const updateBreadcrumbs = () =>
-  (breadcrumbs.value = parse(window.history.state?.breadcrumbs, []));
+  (breadcrumbs.value = parse<Breadcrumb[]>(
+    window.history.state?.breadcrumbs,
+    [],
+  ));
diff --git a/frontend/src/global/styles.scss b/frontend/src/global/styles.scss
index 975082303..44760d694 100644
--- a/frontend/src/global/styles.scss
+++ b/frontend/src/global/styles.scss
@@ -168,13 +168,18 @@ strong {
   font-weight: 600;
 }
 
+::placeholder {
+  color: currentColor;
+  opacity: 0.5;
+}
+
 /** notification dot */
 
-[data-notification="true"] {
+.notification {
   position: relative;
 }
 
-[data-notification="true"]:after {
+.notification:after {
   position: absolute;
   top: 0;
   right: 0;
diff --git a/frontend/src/global/variables.scss b/frontend/src/global/variables.scss
index 00cb20262..8ec35a68b 100644
--- a/frontend/src/global/variables.scss
+++ b/frontend/src/global/variables.scss
@@ -1,8 +1,7 @@
 /** color palette */
-$theme-dark: #00838f;
-$theme: #00acc1;
-$theme-mid: #80deea;
-$theme-light: #b2ebf2;
+$theme: hsl(185, 100%, 30%);
+$theme-mid: hsl(185, 75%, 70%);
+$theme-light: hsl(185, 75%, 80%);
 $white: #ffffff;
 $off-white: #fafafa;
 $light-gray: #eeeeee;
@@ -10,8 +9,8 @@ $gray: #b0b0b0;
 $dark-gray: #808080;
 $off-black: #404040;
 $black: #000000;
-$success: #4caf50;
-$error: #f44336;
+$success: $theme;
+$error: #fe3e5e;
 
 /** transitions */
 $fast: 0.2s ease;
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 2d8a8b2c6..39cba105a 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -13,7 +13,6 @@ import "@/global/meta";
 import "normalize.css";
 import "@/global/styles.scss"; /** keep these last so they take priority */
 
-/** log env variables for debugging */
 console.info(import.meta.env);
 
 /** create main app object */
diff --git a/frontend/src/pages/PageHome.vue b/frontend/src/pages/PageHome.vue
index 45e89bcc0..8de2b2553 100644
--- a/frontend/src/pages/PageHome.vue
+++ b/frontend/src/pages/PageHome.vue
@@ -12,7 +12,7 @@
       :tabs="tabs"
       navigate="Explore"
     />
-    <TabSearch :home="true" />
+    <TabSearch :minimal="true" :focus-explore="true" />
   </AppSection>
 
   <AppSection>
@@ -75,7 +75,7 @@
         subtitle="genotypes"
       />
       <AppTile
-        icon="category-anatomy"
+        icon="category-anatomical-entity"
         design="small"
         :title="`~${(100000).toLocaleString()}`"
         subtitle="anatomies"
diff --git a/frontend/src/pages/PageTestbed.vue b/frontend/src/pages/PageTestbed.vue
index 92329e7a1..19ff2ba86 100644
--- a/frontend/src/pages/PageTestbed.vue
+++ b/frontend/src/pages/PageTestbed.vue
@@ -8,26 +8,17 @@
     <AppHeading>Testbed</AppHeading>
   </AppSection>
 
-  <!-- category icons -->
+  <!-- custom icons -->
   <AppSection>
-    <AppHeading>Category Icons</AppHeading>
-    <AppFlex>
-      <AppIcon icon="category-anatomy" />
-      <AppIcon icon="category-case" />
-      <AppIcon icon="category-cell-line" />
-      <AppIcon icon="category-disease" />
-      <AppIcon icon="category-fallback" />
-      <AppIcon icon="category-function" />
-      <AppIcon icon="category-gene" />
-      <AppIcon icon="category-genotype" />
-      <AppIcon icon="category-homolog" />
-      <AppIcon icon="category-interaction" />
-      <AppIcon icon="category-model" />
-      <AppIcon icon="category-ortholog-disease" />
-      <AppIcon icon="category-ortholog-phenotype" />
-      <AppIcon icon="category-pathway" />
-      <AppIcon icon="category-phenotype" />
-      <AppIcon icon="category-variant" />
+    <AppHeading>Custom Icons</AppHeading>
+    <AppFlex class="icons">
+      <AppIcon
+        v-for="(icon, index) of icons"
+        :key="index"
+        v-tooltip="icon + '.svg'"
+        :icon="icon"
+      />
+      <AppIcon icon="test-initials" />
     </AppFlex>
   </AppSection>
 
@@ -149,6 +140,7 @@
     <AppHeading>Table</AppHeading>
     <span>{{ omit(table, ["cols", "rows"]) }}</span>
     <AppTable
+      id="testbed"
       v-model:sort="table.sort"
       v-model:selectedFilters="table.selectedFilters"
       v-model:per-page="table.perPage"
@@ -179,6 +171,11 @@ import AppTabs from "@/components/AppTabs.vue";
 import AppTextbox from "@/components/AppTextbox.vue";
 import { sleep } from "@/util/debug";
 
+/** get all files in custom icon folder */
+const icons = Object.values(import.meta.glob("@/assets/icons/*.svg")).map(
+  (icon) => (icon.name.split("/").pop() || "").replace(/\.svg$/, ""),
+);
+
 const input = ref("");
 
 type ButtonProps = InstanceType<typeof AppButton>["$props"];
@@ -314,3 +311,10 @@ const table = ref({
 /** util */
 const log = console.info;
 </script>
+
+<style lang="scss" scoped>
+.icons {
+  color: $theme;
+  font-size: 4rem;
+}
+</style>
diff --git a/frontend/src/pages/about/PageAbout.vue b/frontend/src/pages/about/PageAbout.vue
index 28364e732..68446239c 100644
--- a/frontend/src/pages/about/PageAbout.vue
+++ b/frontend/src/pages/about/PageAbout.vue
@@ -47,7 +47,7 @@
       />
       <AppTile
         to="/phenomics-first"
-        icon="category-phenotypic-feature"
+        icon="eye"
         title="Phenomics First"
         subtitle="Our approach to disease diagnosis"
       />
diff --git a/frontend/src/pages/about/PagePhenomicsFirst.vue b/frontend/src/pages/about/PagePhenomicsFirst.vue
index 1cbad73e4..8986ec177 100644
--- a/frontend/src/pages/about/PagePhenomicsFirst.vue
+++ b/frontend/src/pages/about/PagePhenomicsFirst.vue
@@ -47,7 +47,7 @@
     </p>
   </AppSection>
 
-  <AppSection>
+  <AppSection design="fill">
     <AppHeading>Phenomics First Goals</AppHeading>
 
     <p>
diff --git a/frontend/src/pages/explore/PageExplore.vue b/frontend/src/pages/explore/PageExplore.vue
index de9b41abf..e1c1da89d 100644
--- a/frontend/src/pages/explore/PageExplore.vue
+++ b/frontend/src/pages/explore/PageExplore.vue
@@ -9,7 +9,7 @@
     <AppTabs v-model="tab" name="Explore Mode" :tabs="tabs" />
   </AppSection>
 
-  <TabSearch v-if="tab === 'search'" :home="false" />
+  <TabSearch v-if="tab === 'search'" />
 
   <TabTextAnnotator v-if="tab === 'text-annotator'" />
 
diff --git a/frontend/src/pages/explore/TabPhenotypeExplorer.vue b/frontend/src/pages/explore/TabPhenotypeExplorer.vue
index bdcf413ed..93333e595 100644
--- a/frontend/src/pages/explore/TabPhenotypeExplorer.vue
+++ b/frontend/src/pages/explore/TabPhenotypeExplorer.vue
@@ -288,7 +288,7 @@ watch([aPhenotypes, bMode, bTaxon, bPhenotypes], clearResults, { deep: true });
 /** fill in phenotype ids from text annotator */
 onMounted(() => {
   if (window.history.state.phenotypes) {
-    const phenotypes = parse(window.history.state.phenotypes, []) as Options;
+    const phenotypes = parse<Options>(window.history.state.phenotypes, []);
     aPhenotypes.value = phenotypes;
     aGeneratedFrom.value = {
       option: { id: "text annotator" },
diff --git a/frontend/src/pages/explore/TabSearch.vue b/frontend/src/pages/explore/TabSearch.vue
index 3593a59bf..235a8dc1c 100644
--- a/frontend/src/pages/explore/TabSearch.vue
+++ b/frontend/src/pages/explore/TabSearch.vue
@@ -5,12 +5,13 @@
 -->
 
 <template>
-  <AppWrapper tag="AppSection" :wrap="!home">
+  <AppWrapper tag="AppSection" :wrap="!minimal">
     <!-- search box -->
     <AppSelectAutocomplete
       :model-value="search"
       name="Search"
-      placeholder="Search for a gene, disease, phenotype, etc."
+      placeholder="Gene, disease, phenotype, etc."
+      :class="{ 'header-box': headerBox }"
       :options="runGetAutocomplete"
       @focus="onFocus"
       @change="onChange"
@@ -18,13 +19,13 @@
     />
 
     <!-- facet dropdown filters -->
-    <AppFlex v-if="facets.length && !home">
+    <AppFlex v-if="facets.length && !minimal">
       <template v-for="(facet, index) in facets" :key="index">
         <AppSelectMulti
           v-if="Object.keys(facet.facet_values || {}).length"
           v-model="dropdownsSelected[facet.label]"
-          v-tooltip="`${facet.label} filter`"
-          :name="`${facet.label}`"
+          v-tooltip="`<i>${startCase(facet.label)}</i> filter`"
+          :name="startCase(facet.label)"
           :options="dropdownsOptions[facet.label]"
           @change="onSelectedChange"
         />
@@ -32,7 +33,7 @@
     </AppFlex>
   </AppWrapper>
 
-  <AppSection v-if="!home">
+  <AppSection v-if="!minimal">
     <!-- status -->
     <AppStatus v-if="isLoading" code="loading">Loading results</AppStatus>
     <AppStatus v-else-if="isError" code="error"
@@ -51,14 +52,11 @@
       align-h="stretch"
     >
       <div class="title">
-        <AppIcon
-          v-tooltip="getCategoryLabel(result.category)"
-          :icon="getCategoryIcon(result.category)"
-          class="type"
+        <AppNodeBadge
+          :node="result"
+          :state="{ fromSearch: search }"
+          class="name"
         />
-        <AppLink :to="`/node/${result.id}`" class="name">
-          <span v-html="result.name"></span>
-        </AppLink>
         <AppButton
           v-tooltip="'Node ID (click to copy)'"
           class="id"
@@ -108,10 +106,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { groupBy, mapValues, sortBy, uniq } from "lodash";
+import { groupBy, mapValues, sortBy, startCase, uniq } from "lodash";
 import { getCategoryIcon, getCategoryLabel } from "@/api/categories";
 import type { SearchResults } from "@/api/model";
 import { getAutocomplete, getSearch } from "@/api/search";
+import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import type { Options as AutocompleteOptions } from "@/components/AppSelectAutocomplete.vue";
 import AppSelectAutocomplete from "@/components/AppSelectAutocomplete.vue";
 import type { Options as MultiOptions } from "@/components/AppSelectMulti.vue";
@@ -122,11 +121,15 @@ import { appTitle } from "@/global/meta";
 import { useQuery } from "@/util/composables";
 
 type Props = {
-  /** whether to show pared down version for home page */
-  home: boolean;
+  /** whether to show pared down version with just search box */
+  minimal?: boolean;
+  /** whether to style search box for header */
+  headerBox?: boolean;
+  /** whether to navigate to explore page when focusing search box */
+  focusExplore?: boolean;
 };
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 /** route info */
 const router = useRouter();
@@ -147,6 +150,8 @@ const dropdownsSelected = ref<{ [key: string]: MultiOptions }>({});
 
 /** when user focuses text box */
 async function onFocus() {
+  if (!props.focusExplore) return;
+
   /** navigate to explore page */
   await router.push({ ...route, name: "Explore" });
   /** refocus box */
@@ -277,7 +282,11 @@ const {
             label:
               facet.label === "category"
                 ? getCategoryLabel(facet_value.label)
-                : facet_value.label,
+                : startCase(facet_value.label),
+            icon:
+              facet.label === "category"
+                ? getCategoryIcon(facet_value.label)
+                : "",
             count: facet_value.count,
           })) || [];
       }
@@ -352,6 +361,7 @@ watch(search, async () => {
   /** update url */
   const query: { [key: string]: string } = {};
   if (search.value) query.search = search.value;
+  /** navigate to explore page */
   await router.push({ ...route, name: "Explore", query });
 });
 
@@ -367,14 +377,32 @@ watch(from, () => runGetSearch(false));
   text-align: left;
 }
 
-.type {
-  flex-grow: 0;
+.name {
+  flex-grow: 1;
   flex-shrink: 0;
-  font-size: 2rem;
 }
 
-.name {
-  flex-grow: 1;
+.header-box {
+  width: 300px;
+  max-width: 100%;
+}
+
+.header-box :deep(input) {
+  border-top-width: 0;
+  border-right-width: 0;
+  border-left-width: 0;
+  border-radius: 0;
+  border-color: currentColor;
+  background: none;
+  color: currentColor;
+}
+
+.header-box :deep(.icon) {
+  color: currentColor;
+}
+
+.name > :deep(svg) {
+  font-size: 2rem;
 }
 
 .id {
@@ -403,7 +431,7 @@ watch(from, () => runGetSearch(false));
   height: 30px;
   padding: 0 3px;
   border-radius: $rounded;
-  color: $theme-dark;
+  color: $theme;
   transition: box-shadow $fast;
 
   &:hover {
diff --git a/frontend/src/pages/node/AssociationsSummary.vue b/frontend/src/pages/node/AssociationsSummary.vue
index 75d312fdc..8cb4751cf 100644
--- a/frontend/src/pages/node/AssociationsSummary.vue
+++ b/frontend/src/pages/node/AssociationsSummary.vue
@@ -27,6 +27,7 @@
             id: item.subject,
             name: item.subject_label,
             category: item.subject_category,
+            info: item.subject_taxon_label,
           }"
           :link="node.id !== item.subject"
         />
@@ -36,6 +37,7 @@
             id: item.object,
             name: item.object_label,
             category: item.object_category,
+            info: item.object_taxon_label,
           }"
           :link="node.id !== item.object"
         />
diff --git a/frontend/src/pages/node/AssociationsTable.vue b/frontend/src/pages/node/AssociationsTable.vue
index 505b7819e..1e93a1900 100644
--- a/frontend/src/pages/node/AssociationsTable.vue
+++ b/frontend/src/pages/node/AssociationsTable.vue
@@ -14,6 +14,7 @@
   <!-- results -->
   <AppTable
     v-else
+    id="associations"
     v-model:sort="sort"
     v-model:per-page="perPage"
     v-model:start="start"
@@ -30,6 +31,7 @@
           id: row.subject,
           name: row.subject_label,
           category: row.subject_category,
+          info: row.subject_taxon_label,
         }"
         :link="node.id !== row.subject"
       />
@@ -47,6 +49,7 @@
           id: row.object,
           name: row.object_label,
           category: row.object_category,
+          info: row.object_taxon_label,
         }"
         :link="node.id !== row.object"
       />
@@ -74,7 +77,7 @@
     <!-- taxon specific -->
     <template #taxon="{ row }">
       {{
-        row.direction === "outgoing"
+        row.direction === AssociationDirectionEnum.outgoing
           ? row.object_taxon_label
           : row.subject_taxon_label
       }}
@@ -92,7 +95,11 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { getAssociations } from "@/api/associations";
 import { getCategoryLabel } from "@/api/categories";
-import type { DirectionalAssociation, Node } from "@/api/model";
+import {
+  AssociationDirectionEnum,
+  type DirectionalAssociation,
+  type Node,
+} from "@/api/model";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppPredicateBadge from "@/components/AppPredicateBadge.vue";
 import type { Option } from "@/components/AppSelectSingle.vue";
@@ -138,14 +145,14 @@ const cols = computed((): Cols<Datum> => {
       heading: getCategoryLabel(
         associations.value.items[0]?.subject_category || "Subject",
       ),
-      width: "max-content",
+      width: 3,
       sortable: true,
     },
     {
       slot: "predicate",
       key: "predicate",
       heading: "Association",
-      width: "max-content",
+      width: 2,
       sortable: true,
     },
     {
@@ -154,14 +161,14 @@ const cols = computed((): Cols<Datum> => {
       heading: getCategoryLabel(
         associations.value.items[0]?.object_category || "Object",
       ),
-      width: "max-content",
+      width: 3,
       sortable: true,
     },
     {
       slot: "evidence",
       key: "evidence_count",
       heading: "Evidence",
-      width: "min-content",
+      width: 1,
       align: "center",
       sortable: true,
     },
@@ -179,7 +186,7 @@ const cols = computed((): Cols<Datum> => {
     extraCols.push({
       slot: "taxon",
       heading: "Taxon",
-      width: "max-content",
+      width: 2,
     });
 
   /** phenotype specific columns */
diff --git a/frontend/src/pages/node/EvidenceViewer.vue b/frontend/src/pages/node/EvidenceViewer.vue
index 7c34437ca..3ea50c832 100644
--- a/frontend/src/pages/node/EvidenceViewer.vue
+++ b/frontend/src/pages/node/EvidenceViewer.vue
@@ -9,13 +9,20 @@
 
     <div>
       Evidence for the selected association, <br />
-      <AppNodeBadge :node="node" />&nbsp;
-      <AppPredicateBadge :association="association" />&nbsp;
       <AppNodeBadge
         :node="{
           id: association.subject,
           name: association.subject_label,
           category: association.subject_category,
+          info: association.subject_taxon_label,
+        }"
+      />&nbsp; <AppPredicateBadge :association="association" />&nbsp;
+      <AppNodeBadge
+        :node="{
+          id: association.object,
+          name: association.object_label,
+          category: association.object_category,
+          info: association.object_taxon_label,
         }"
       />
     </div>
diff --git a/frontend/src/pages/node/PageNode.vue b/frontend/src/pages/node/PageNode.vue
index d3895cc4e..b96cd1985 100644
--- a/frontend/src/pages/node/PageNode.vue
+++ b/frontend/src/pages/node/PageNode.vue
@@ -28,6 +28,7 @@
     <SectionHierarchy :node="node" />
     <SectionVisualization :node="node" />
     <SectionAssociations :node="node" />
+    <SectionBreadcrumbs :node="node" />
     <Teleport to="body">
       <TheTableOfContents />
     </Teleport>
@@ -41,6 +42,7 @@ import { getNode } from "@/api/node";
 import TheTableOfContents from "@/components/TheTableOfContents.vue";
 import { addEntry } from "@/global/history";
 import { appDescription, appTitle } from "@/global/meta";
+import SectionBreadcrumbs from "@/pages/node/SectionBreadcrumbs.vue";
 import { scrollToHash } from "@/router";
 import { useQuery } from "@/util/composables";
 import SectionAssociations from "./SectionAssociations.vue";
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index 9328725b3..382eac777 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -9,10 +9,8 @@
     <!-- select -->
     <AppFlex gap="small">
       <span
-        >Associations between &nbsp;<AppNodeBadge
-          :node="node"
-          :link="false"
-        />&nbsp; and</span
+        >Associations between &nbsp;<AppNodeBadge :node="node" />&nbsp;
+        and</span
       >
       <AppSelectSingle
         v-model="category"
@@ -60,6 +58,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { startCase } from "lodash";
 import type { DirectionalAssociation, Node } from "@/api/model";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import type { Option, Options } from "@/components/AppSelectSingle.vue";
@@ -107,7 +106,7 @@ const categoryOptions = computed(
   (): Options =>
     props.node.association_counts?.map((association_count) => ({
       id: association_count.category || "",
-      label: association_count.label,
+      label: startCase(association_count.label),
       count: association_count.count,
     })) || [],
 );
diff --git a/frontend/src/pages/node/SectionBreadcrumbs.vue b/frontend/src/pages/node/SectionBreadcrumbs.vue
new file mode 100644
index 000000000..cfdc8a529
--- /dev/null
+++ b/frontend/src/pages/node/SectionBreadcrumbs.vue
@@ -0,0 +1,75 @@
+<template>
+  <AppSection v-if="breadcrumbs.length">
+    <AppHeading icon="location-dot">Breadcrumbs</AppHeading>
+
+    <span
+      >How you got to <AppNodeBadge :node="node" /> through the Monarch
+      knowledge graph:</span
+    >
+
+    <AppFlex direction="col">
+      <template v-for="(breadcrumb, index) of breadcrumbs" :key="index">
+        <!-- node -->
+        <AppNodeBadge
+          :node="breadcrumb.node"
+          @click.prevent.capture="$router.go(-breadcrumbs.length + index)"
+        />
+        <!-- predicate -->
+        <AppPredicateBadge
+          :association="breadcrumb.association"
+          :vertical="true"
+        />
+      </template>
+
+      <!-- ending/current node -->
+      <AppNodeBadge :node="node" />
+    </AppFlex>
+
+    <!-- clear button -->
+    <AppButton
+      v-tooltip="'Clear breadcrumb history'"
+      icon="times"
+      text="Clear"
+      design="small"
+      @click="clear"
+    />
+  </AppSection>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { useRoute } from "vue-router";
+import type { Node } from "@/api/model";
+import AppNodeBadge from "@/components/AppNodeBadge.vue";
+import AppPredicateBadge from "@/components/AppPredicateBadge.vue";
+import { breadcrumbs, updateBreadcrumbs } from "@/global/breadcrumbs";
+
+interface Props {
+  /** current node */
+  node: Node;
+}
+
+defineProps<Props>();
+
+/** route info */
+const route = useRoute();
+
+/** keep breadcrumbs global variable in sync with history.state.breadcrumbs */
+watch(() => route, updateBreadcrumbs, { immediate: true, deep: true });
+
+/** clear breadcrumbs history */
+function clear() {
+  /**
+   * confirmation warning not necessary since back button should return to
+   * previous state
+   */
+  window.history.pushState({}, "");
+  updateBreadcrumbs();
+}
+</script>
+
+<style lang="scss" scoped>
+.arrow {
+  color: $gray;
+}
+</style>
diff --git a/frontend/src/pages/node/SectionHierarchy.vue b/frontend/src/pages/node/SectionHierarchy.vue
index 0180259c1..3db67e23f 100644
--- a/frontend/src/pages/node/SectionHierarchy.vue
+++ b/frontend/src/pages/node/SectionHierarchy.vue
@@ -20,7 +20,13 @@
             v-for="(_class, index) in node.node_hierarchy?.super_classes"
             :key="index"
             :node="_class"
-            :breadcrumb="{ node }"
+            :breadcrumb="{
+              node,
+              association: {
+                predicate: 'is super class of',
+                direction: AssociationDirectionEnum.incoming,
+              },
+            }"
           />
         </AppFlex>
       </AppDetail>
@@ -38,7 +44,10 @@
             v-for="(_class, index) in node.node_hierarchy?.equivalent_classes"
             :key="index"
             :node="_class"
-            :breadcrumb="{ node }"
+            :breadcrumb="{
+              node,
+              association: { predicate: 'is equivalent class of' },
+            }"
           />
         </AppFlex>
       </AppDetail>
@@ -56,7 +65,10 @@
             v-for="(_class, index) in node.node_hierarchy?.sub_classes"
             :key="index"
             :node="_class"
-            :breadcrumb="{ node }"
+            :breadcrumb="{
+              node,
+              association: { predicate: 'is sub class of' },
+            }"
           />
         </AppFlex>
       </AppDetail>
@@ -65,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Node } from "@/api/model";
+import { AssociationDirectionEnum, type Node } from "@/api/model";
 import AppDetail from "@/components/AppDetail.vue";
 import AppDetails from "@/components/AppDetails.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
diff --git a/frontend/src/pages/node/SectionTitle.vue b/frontend/src/pages/node/SectionTitle.vue
index d739de597..b3d1ba69c 100644
--- a/frontend/src/pages/node/SectionTitle.vue
+++ b/frontend/src/pages/node/SectionTitle.vue
@@ -4,19 +4,17 @@
 
 <template>
   <AppSection design="fill" class="section">
-    <AppFlex dir="column" gap="small">
+    <AppFlex dir="column">
       <AppHeading class="heading" :icon="getCategoryIcon(node.category)">
         {{ node.name }}
       </AppHeading>
+
       <AppFlex>
+        <span>
+          {{ getCategoryLabel(node.category) }}
+        </span>
         <AppButton
-          v-tooltip="'The category/type of this node'"
-          design="small"
-          color="secondary"
-          :text="getCategoryLabel(node.category)"
-        />
-        <AppButton
-          v-tooltip="'The ID of this node. Click to copy.'"
+          v-tooltip="'ID of this node (click to copy)'"
           design="small"
           color="secondary"
           icon="hashtag"
@@ -24,13 +22,24 @@
           :copy="true"
         />
       </AppFlex>
+
+      <AppButton
+        v-if="fromSearch"
+        icon="arrow-left"
+        :text="`Back to search &quot;${fromSearch}&quot;`"
+        design="small"
+        @click="$router.go(-1)"
+      />
     </AppFlex>
   </AppSection>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import { truncate } from "lodash";
 import { getCategoryIcon, getCategoryLabel } from "@/api/categories";
 import type { Node } from "@/api/model";
+import { parse } from "@/util/object";
 
 type Props = {
   /** current node */
@@ -38,6 +47,11 @@ type Props = {
 };
 
 defineProps<Props>();
+
+/** checking if coming from search */
+const fromSearch = computed(() =>
+  truncate(parse(window.history.state.fromSearch, "")),
+);
 </script>
 
 <style lang="scss" scoped>
@@ -46,11 +60,8 @@ defineProps<Props>();
   padding-bottom: 30px !important;
 }
 
-.button {
-  color: $off-black !important;
-}
-
 .heading {
+  padding: 0;
   font-size: 1.2rem;
 }
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 098b7db4f..9a9201fbb 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -29,31 +29,33 @@ export const routes: RouteRecordRaw[] = [
     component: PageHome,
     beforeEnter: async () => {
       /** look for redirect in session storage (saved from public/404.html page) */
-      const redirect = window.sessionStorage.redirect;
-      let redirectState = parse(window.sessionStorage.redirectState, {});
+      const redirect = window.sessionStorage.redirect || "";
+      const redirectState = window.sessionStorage.redirectState || "{}";
+
+      /** parse serialized state */
+      const state = pick(
+        parse<{ [key: string]: unknown }>(redirectState, {}),
+        /** only keep fields added by this app */
+        ["phenotypes", "breadcrumbs", "fromSearch"],
+      );
 
       /** after consuming, remove storage values */
       window.sessionStorage.removeItem("redirect");
       window.sessionStorage.removeItem("redirectState");
 
-      /** log for debugging */
       if (import.meta.env.MODE !== "test") {
         console.info("Redirecting to:", redirect);
-        console.info("With state:", redirectState);
+        console.info("With state:", state);
       }
 
-      /**
-       * only keep state added by app, as to not interfere with built-in browser
-       * nav
-       */
-      redirectState = pick(redirectState, ["phenotypes", "breadcrumbs"]);
-
       /** apply state to current route */
-      if (!isEmpty(redirectState))
-        window.history.replaceState(redirectState, "");
+      if (!isEmpty(state)) window.history.replaceState(state, "");
 
       /** go to appropriate route */
-      if (redirect) return redirect;
+      if (redirect) {
+        const { pathname, search, hash } = new URL(redirect);
+        return pathname + search + hash;
+      }
     },
   },
   {
diff --git a/frontend/src/util/object.ts b/frontend/src/util/object.ts
index f57a7c7db..50c77c67c 100644
--- a/frontend/src/util/object.ts
+++ b/frontend/src/util/object.ts
@@ -58,10 +58,10 @@ export const stringify = (value: unknown, space = 0) => {
 };
 
 /** safe json parse */
-export const parse = (value: string, defaultValue: unknown = null) => {
+export const parse = <Type>(value: string, defaultValue: Type) => {
   try {
     if (!value) return defaultValue;
-    else return JSON.parse(value);
+    else return JSON.parse(value) as Type;
   } catch (error) {
     console.warn("Invalid JSON parse");
     console.info(value);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6c88f3ff5..129efd1bd 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,9 +1,5 @@
 {
-  "extends": [
-    "@vue/tsconfig/tsconfig.dom.json",
-    "@tsconfig/node18/tsconfig.json",
-    "@vue/tsconfig/tsconfig.json"
-  ],
+  "extends": ["@tsconfig/node18/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
   "include": [
     "env.d.ts",
     "src/**/*",
@@ -19,7 +15,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "types": ["node", "jsdom"]
diff --git a/frontend/unit/uptime.test.ts b/frontend/unit/uptime.test.ts
index 3ce190a1c..fdc6ef88f 100644
--- a/frontend/unit/uptime.test.ts
+++ b/frontend/unit/uptime.test.ts
@@ -14,8 +14,8 @@ test("Help page renders uptimerobot statuses", async () => {
    * status types from uptimerobot. check that all of them get converted to and
    * displayed as appropriate status components.
    */
-  expect(wrapper.find("[data-code='success']").exists()).toBeTruthy();
-  expect(wrapper.find("[data-code='error']").exists()).toBeTruthy();
-  expect(wrapper.find("[data-code='paused']").exists()).toBeTruthy();
-  expect(wrapper.find("[data-code='unknown']").exists()).toBeTruthy();
+  expect(wrapper.find(".success").exists()).toBeTruthy();
+  expect(wrapper.find(".error").exists()).toBeTruthy();
+  expect(wrapper.find(".paused").exists()).toBeTruthy();
+  expect(wrapper.find(".unknown").exists()).toBeTruthy();
 });