From 029186a1e6c906ea0226370d631cd2f54acf463d Mon Sep 17 00:00:00 2001
From: Vincent Rubinetti <vince.rubinetti@gmail.com>
Date: Thu, 2 Nov 2023 18:04:24 -0400
Subject: [PATCH] Make autocomplete go directly to entity (#458)

Closes #456
Closes #451
Closes #445
Closes #439

- "dummy" -> "fake"
- change e2e search tests to match new autocomplete behavior
- rearrange phenogrid response
- refactor autocomplete component to accommodate entity autocomplete
search
- fix input component event bug
- change phenogrid tooltip content
- tweak node history to record node visits instead of searches
- remove overview about page (since it's out of date). see #436
- fix phenogrid infinite resize loop bug
- refactor router scrollTo logic again, and fix minor bugs
- refactor explore search tab to accommodate auto complete entity search
- fix minor useQuery composable bug
- remove scroll restoration behavior
- fix small tab title has undefined while node name loads
---
 frontend/e2e/phenotype-explorer.test.ts       |   4 +-
 frontend/e2e/search.test.ts                   |  56 ++++-----
 frontend/src/api/model.ts                     |   6 +-
 frontend/src/api/phenotype-explorer.ts        |  12 +-
 frontend/src/api/search.ts                    |  23 +---
 .../src/components/AppSelectAutocomplete.vue  |  45 ++++---
 frontend/src/components/AppTable.vue          |   2 +-
 frontend/src/components/AppTextbox.vue        |   5 +-
 frontend/src/components/TheHeader.vue         |   4 +-
 frontend/src/components/ThePhenogrid.vue      |  58 +++++----
 frontend/src/global/history.ts                |  19 ++-
 frontend/src/global/icons.ts                  |   2 +-
 frontend/src/pages/PageTestbed.vue            |   6 +-
 frontend/src/pages/about/PageAbout.vue        |   6 -
 frontend/src/pages/explore/PagePhenogrid.vue  |  68 +++++-----
 .../pages/explore/TabPhenotypeExplorer.vue    |   5 +-
 frontend/src/pages/explore/TabSearch.vue      | 119 ++++++++++--------
 frontend/src/pages/node/PageNode.vue          |  27 ++--
 .../pages/node/SectionAssociationDetails.vue  |   5 +-
 .../src/pages/node/SectionAssociations.vue    |  30 +----
 frontend/src/router/index.ts                  |  66 ++++------
 frontend/src/util/composables.ts              |   4 +-
 frontend/unit/AppTextbox.test.ts              |   2 +-
 frontend/unit/composables.test.ts             |  10 +-
 24 files changed, 272 insertions(+), 312 deletions(-)

diff --git a/frontend/e2e/phenotype-explorer.test.ts b/frontend/e2e/phenotype-explorer.test.ts
index 4b1128926..cf0221b66 100644
--- a/frontend/e2e/phenotype-explorer.test.ts
+++ b/frontend/e2e/phenotype-explorer.test.ts
@@ -69,7 +69,7 @@ test("Phenotype set vs gene/disease works", async ({ page }) => {
     .first()
     .click();
 
-  /** paste specific dummy phenotypes */
+  /** paste specific fake phenotypes */
   await paste(page.locator("input"), "HP:0004970,HP:0004933,HP:0004927");
 
   /** run analysis, and look for expected results */
@@ -87,7 +87,7 @@ test("Phenotype set vs phenotype set works", async ({ page }) => {
 
   await page.goto("/explore#phenotype-explorer");
 
-  /** paste specific dummy phenotypes */
+  /** paste specific fake phenotypes */
   await paste(
     page.locator("input").first(),
     "HP:0004970,HP:0004933,HP:0004927",
diff --git a/frontend/e2e/search.test.ts b/frontend/e2e/search.test.ts
index 0802f2638..8fdeb7282 100644
--- a/frontend/e2e/search.test.ts
+++ b/frontend/e2e/search.test.ts
@@ -21,61 +21,59 @@ test("Redirects to explore page from home page", async ({ page }) => {
 test("Recent/frequent results show", async ({ page }) => {
   await page.goto("/explore");
 
-  /** dummy searches */
-  const searches = [
-    "abc def",
-    "123",
-    "123",
-    "abc def",
-    "123",
-    "123",
-    "abc def",
+  const nodes = [
+    "MONDO:0007523",
+    "HP:0003179",
+    "HP:0003179",
+    "MONDO:0007523",
+    "HP:0003179",
+    "HP:0003179",
+    "MONDO:0007523",
+    "HP:0100775",
   ];
 
-  /** go through dummy searches */
-  for (const search of searches) {
-    await page.locator("input").fill(search);
-    /** dispatch textbox change event which triggers search and records it */
-    await page.locator("input").dispatchEvent("change");
-    /** wait for results */
-    await expect(page.locator("p.description").first()).toBeVisible();
-    await page.locator(".textbox button").click();
+  for (const node of nodes) {
+    await page.goto("/" + node);
+    await expect(page.locator("#overview")).toBeVisible();
   }
 
-  /** go to node page, which should also get added to search history */
-  await page.goto("/MONDO:12345");
-  /** wait for page to load */
-  await expect(page.locator("#overview")).toBeVisible();
   await page.goto("/explore");
-
-  /** focus search box to show list of results */
   await page.locator("input").focus();
+  const options = page.locator("[role='option']");
 
   /** recent */
-  const options = page.locator("[role='option']");
   await expect(
     options
       .nth(0)
-      .getByText(/muscular dystrophy/i)
+      .getByText(/Dural ectasia/i)
       .first(),
   ).toBeVisible();
   await expect(
     options
       .nth(1)
-      .getByText(/abc def/i)
+      .getByText(/Ehlers-Danlos syndrome, hypermobility/i)
+      .first(),
+  ).toBeVisible();
+  await expect(
+    options
+      .nth(2)
+      .getByText(/Protrusio acetabuli/i)
       .first(),
   ).toBeVisible();
-  await expect(options.nth(2).getByText(/123/).first()).toBeVisible();
 
   /** frequent */
   await expect(
-    page.locator("[role='option']").nth(3).getByText(/123/).first(),
+    page
+      .locator("[role='option']")
+      .nth(3)
+      .getByText(/Protrusio acetabuli/i)
+      .first(),
   ).toBeVisible();
   await expect(
     page
       .locator("[role='option']")
       .nth(4)
-      .getByText(/abc def/)
+      .getByText(/Ehlers-Danlos syndrome, hypermobility/i)
       .first(),
   ).toBeVisible();
 });
diff --git a/frontend/src/api/model.ts b/frontend/src/api/model.ts
index bbdbc59d1..34b656aeb 100644
--- a/frontend/src/api/model.ts
+++ b/frontend/src/api/model.ts
@@ -502,12 +502,12 @@ export interface TermPairwiseSimilarity extends PairwiseSimilarity {
     /** The IC of the object */
     ancestor_information_content?: string,
     /** The number of concepts in the intersection divided by the number in the union */
-    jaccard_similarity?: string,
+    jaccard_similarity?: number,
     /** the dot product of two node embeddings divided by the product of their lengths */
     cosine_similarity?: number,
-    dice_similarity?: string,
+    dice_similarity?: number,
     /** the geometric mean of the jaccard similarity and the information content */
-    phenodigm_score?: string,
+    phenodigm_score?: number,
 };
 /**
  * A simple pairwise similarity between two sets of concepts/terms
diff --git a/frontend/src/api/phenotype-explorer.ts b/frontend/src/api/phenotype-explorer.ts
index 54159ecd7..cffdf02c8 100644
--- a/frontend/src/api/phenotype-explorer.ts
+++ b/frontend/src/api/phenotype-explorer.ts
@@ -139,8 +139,13 @@ export const compareSetToSet = async (
     [key: string]: {
       score: number;
       strength: number;
-      simInfo: Partial<TermPairwiseSimilarity>;
-    };
+    } & Pick<
+      TermPairwiseSimilarity,
+      | "ancestor_id"
+      | "ancestor_label"
+      | "jaccard_similarity"
+      | "phenodigm_score"
+    >;
   } = {};
 
   /** get subject matches */
@@ -162,8 +167,9 @@ export const compareSetToSet = async (
       cells[col.id + row.id] = {
         score: match?.score || 0,
         strength: 0,
-        simInfo: pick(match?.similarity, [
+        ...pick(match?.similarity, [
           "ancestor_id",
+          "ancestor_label",
           "jaccard_similarity",
           "phenodigm_score",
         ]),
diff --git a/frontend/src/api/search.ts b/frontend/src/api/search.ts
index 0da68fdb0..70b0523c8 100644
--- a/frontend/src/api/search.ts
+++ b/frontend/src/api/search.ts
@@ -1,5 +1,4 @@
-import { groupBy, uniq } from "lodash";
-import type { SearchResult, SearchResults } from "@/api/model";
+import type { SearchResults } from "@/api/model";
 import { apiUrl, request } from "./index";
 
 export type Filters = { [key: string]: string[] };
@@ -21,29 +20,13 @@ export const getSearch = async (
   return response;
 };
 
-type DedupedSearchResults = Omit<SearchResults, "items"> & {
-  items: (SearchResult & { dupes: string[] })[];
-};
-
 export const getAutocomplete = async (q: string) => {
   const url = `${apiUrl}/autocomplete`;
   const response = await request<SearchResults>(url, { q });
 
-  const transformedResponse: DedupedSearchResults = {
+  const transformedResponse = {
     ...response,
-    items: Object.values(
-      /** consolidate items */
-      groupBy(
-        response.items,
-        /** by name, case insensitively */
-        (item) => item.name.toLowerCase(),
-      ),
-    ).map((dupes) => ({
-      ...dupes[0],
-      /** keep list of duplicated names */
-      /** de-dupe this list case sensitively */
-      dupes: uniq(dupes.map((dupe) => dupe.name)),
-    })),
+    items: response.items.slice(0, 20),
   };
 
   return transformedResponse;
diff --git a/frontend/src/components/AppSelectAutocomplete.vue b/frontend/src/components/AppSelectAutocomplete.vue
index d662d64ae..3036173bb 100644
--- a/frontend/src/components/AppSelectAutocomplete.vue
+++ b/frontend/src/components/AppSelectAutocomplete.vue
@@ -62,11 +62,14 @@
           :id="`option-${id}-${index}`"
           :key="index"
           v-tooltip="option.tooltip"
-          :class="['option', { highlighted: index === highlighted }]"
+          :class="[
+            'option',
+            { highlighted: index === highlighted, special: option.special },
+          ]"
           role="option"
           :aria-selected="true"
           tabindex="0"
-          @click.prevent="() => select(option.label)"
+          @click.prevent="() => select(option)"
           @mousedown.prevent=""
           @focusin="() => null"
           @keydown="() => null"
@@ -83,9 +86,6 @@
         </div>
       </div>
     </Teleport>
-
-    <!-- description -->
-    <div v-if="description" class="description">{{ description }}</div>
   </div>
 </template>
 
@@ -99,12 +99,16 @@ export type Option = {
   icon?: string;
   /** display label */
   label: string;
+  /** unique id */
+  id?: string;
   /** highlighting html */
   highlight?: string;
   /** info col */
   info?: string;
   /** tooltip on hover */
   tooltip?: string;
+  /** whether option is "special" (gets styled differently) */
+  special?: boolean;
 };
 </script>
 
@@ -136,9 +140,9 @@ type Emits = {
   /** when input focused */
   focus: [];
   /** when input value change "submitted"/"committed" by user */
-  change: [string];
+  change: [string | Option, string];
   /** when user wants to delete an entry */
-  delete: [string];
+  delete: [Option];
 };
 
 const emit = defineEmits<Emits>();
@@ -182,9 +186,13 @@ async function onDebounce() {
   await runGetResults();
 }
 
+/** ignore next child input box change event */
+let ignoreChange = false;
+
 /** when user "commits" change to value, e.g. pressing enter, de-focusing, etc */
-function onChange(value: string) {
-  select(value);
+async function onChange(value: string) {
+  if (!ignoreChange) select(value);
+  ignoreChange = false;
 }
 
 /** when user presses key in input */
@@ -210,13 +218,12 @@ async function onKeydown(event: KeyboardEvent) {
 
   /** enter key to select highlighted result */
   if (event.key === "Enter" && highlighted.value >= 0) {
-    event.stopPropagation();
-    select(results.value[highlighted.value].label);
+    select(results.value[highlighted.value]);
   }
 
   /** delete key to delete the highlighted result */
   if (event.key === "Delete" && event.shiftKey) {
-    emit("delete", results.value[highlighted.value].label);
+    emit("delete", results.value[highlighted.value]);
     await runGetResults();
   }
 
@@ -225,9 +232,11 @@ async function onKeydown(event: KeyboardEvent) {
 }
 
 /** select an option */
-async function select(value: string) {
-  search.value = value;
-  emit("change", value);
+async function select(value: string | Option) {
+  /** ignore next child input box change event triggered by enter press */
+  ignoreChange = true;
+  emit("change", value, search.value);
+  search.value = typeof value === "string" ? value : value.label;
   close();
 }
 
@@ -345,9 +354,7 @@ watch(highlighted, () => {
   color: $gray;
 }
 
-.description {
-  margin-top: 10px;
-  color: $dark-gray;
-  font-size: 0.9rem;
+.special {
+  font-weight: 500;
 }
 </style>
diff --git a/frontend/src/components/AppTable.vue b/frontend/src/components/AppTable.vue
index 78ba2092d..5645cccaf 100644
--- a/frontend/src/components/AppTable.vue
+++ b/frontend/src/components/AppTable.vue
@@ -468,7 +468,7 @@ watch(
   }
 
   &.divider {
-    width: 2px;
+    width: 2px !important;
     margin: 0 auto;
     padding: 0;
     background: $light-gray;
diff --git a/frontend/src/components/AppTextbox.vue b/frontend/src/components/AppTextbox.vue
index ac1ec0fe1..05147d129 100644
--- a/frontend/src/components/AppTextbox.vue
+++ b/frontend/src/components/AppTextbox.vue
@@ -80,7 +80,7 @@ type Emits = {
   blur: [];
 };
 
-const emit = defineEmits<Emits>();
+defineEmits<Emits>();
 
 /** element reference */
 const textbox = ref();
@@ -91,7 +91,7 @@ const input = ref();
 function clear() {
   input.value.input.value = "";
   input.value.input.dispatchEvent(new Event("input"));
-  emit("change", "");
+  input.value.input.dispatchEvent(new Event("change"));
 }
 
 /** allow parent to access ref */
@@ -141,7 +141,6 @@ $height: 40px;
   justify-content: center;
   width: $height;
   height: $height;
-  color: $gray;
 }
 
 .input {
diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
index c9943f111..02a2aa4bb 100644
--- a/frontend/src/components/TheHeader.vue
+++ b/frontend/src/components/TheHeader.vue
@@ -242,8 +242,8 @@ $wrap: 900px;
 .nav {
   display: flex;
   align-items: center;
-  justify-content: center;
-  max-width: 100%;
+  justify-content: flex-end;
+  width: 100%;
   padding: 15px;
   gap: 10px;
 }
diff --git a/frontend/src/components/ThePhenogrid.vue b/frontend/src/components/ThePhenogrid.vue
index 8d8025628..fd0912ad2 100644
--- a/frontend/src/components/ThePhenogrid.vue
+++ b/frontend/src/components/ThePhenogrid.vue
@@ -85,21 +85,28 @@
                         :node="{ id: row.id, name: row.label }"
                         :absolute="true"
                       />
-                      <span>Score</span>
+                      <span>Ancestor</span>
+                      <AppNodeBadge
+                        :node="{
+                          id: data.cells[col.id + row.id].ancestor_id,
+                          name: data.cells[col.id + row.id].ancestor_label,
+                        }"
+                        :absolute="true"
+                      />
+                      <span>Ancestor IC</span>
                       <span>{{
-                        data.cells[col.id + row.id].score.toFixed(2)
+                        data.cells[col.id + row.id].score.toFixed(3)
+                      }}</span>
+                      <span>Phenodigm</span>
+                      <span>{{
+                        data.cells[col.id + row.id].phenodigm_score?.toFixed(3)
+                      }}</span>
+                      <span>Jaccard</span>
+                      <span>{{
+                        data.cells[col.id + row.id].jaccard_similarity?.toFixed(
+                          3,
+                        )
                       }}</span>
-                      <template
-                        v-for="(value, key, index) in data.cells[
-                          col.id + row.id
-                        ].simInfo"
-                        :key="index"
-                      >
-                        <span>{{ startCase(String(key)) }}</span>
-                        <span>{{
-                          typeof value === "number" ? value.toFixed(2) : value
-                        }}</span>
-                      </template>
                     </div>
                   </template>
                 </tooltip>
@@ -146,7 +153,7 @@
           :options="sortMethods"
         />
       </AppFlex>
-      <AppCheckbox v-model="reverse" text="Flip" />
+      <AppCheckbox v-model="reverse" text="Reverse" />
       <AppButton
         v-tooltip="'Copy unmatched phenotype ids to clipboard'"
         design="small"
@@ -160,7 +167,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { sortBy, startCase } from "lodash";
+import { sortBy } from "lodash";
 import { hideAll } from "tippy.js";
 import type { TermInfo } from "@/api/model";
 import { type SetToSet } from "@/api/phenotype-explorer";
@@ -190,17 +197,21 @@ function hoverCell(colIndex: number, rowIndex: number, unset = false) {
   else hovered.value = { col: colIndex, row: rowIndex };
 }
 
-const flex = ref<{ element: HTMLTableElement }>();
+const flex = ref<{ element: HTMLElement }>();
 const scroll = ref<HTMLElement>();
 
+/** set container to be full size (of contents) */
+function setFullsize(full: boolean) {
+  if (!flex.value?.element || !scroll.value) return;
+  scroll.value.classList[full ? "add" : "remove"]("full-size");
+  flex.value.element.classList[full ? "add" : "remove"]("full-size");
+}
+
 /** download grid as png */
 async function download() {
   if (!flex.value?.element || !scroll.value) return;
 
-  /** make full size */
-  scroll.value.classList.add("saving");
-  flex.value.element.classList.add("saving");
-
+  setFullsize(true);
   hideAll();
 
   /** wait for dom to update */
@@ -216,9 +227,7 @@ async function download() {
     snackbar("Error saving image");
   }
 
-  /** reset size */
-  scroll.value.classList.remove("saving");
-  flex.value.element.classList.remove("saving");
+  setFullsize(false);
 }
 
 /** options for sorting */
@@ -251,12 +260,11 @@ function copy() {
 <style scoped lang="scss">
 .scroll {
   max-width: 100%;
-  max-height: calc(100vh - 200px);
   overflow: auto;
   background: $white;
 }
 
-.saving {
+.full-size {
   width: max-content !important;
   max-width: unset !important;
   height: max-content !important;
diff --git a/frontend/src/global/history.ts b/frontend/src/global/history.ts
index 242b9f0cb..ceb2e9fba 100644
--- a/frontend/src/global/history.ts
+++ b/frontend/src/global/history.ts
@@ -1,15 +1,14 @@
 import { useLocalStorage } from "@vueuse/core";
+import type { Option } from "@/components/AppSelectAutocomplete.vue";
 
-/** raw, in-order node search/visit history */
-export const history = useLocalStorage<string[]>("search-history", []);
+/** raw, in-order node history */
+export const history = useLocalStorage<Option[]>("search-history", []);
 
-/** add entry to node search/visit history */
-export const addEntry = (value?: string) => {
-  if (value?.trim()) history.value.push(value.trim());
+/** add entry to node history */
+export const addEntry = (entry: Option) => {
+  history.value.push(entry);
 };
 
-/** delete entry(s) from node search/visit history */
-export const deleteEntry = (value: string) =>
-  (history.value = history.value.filter(
-    (entry) => entry.trim() !== value.trim(),
-  ));
+/** delete entry(s) from node history */
+export const deleteEntry = (entry: Option) =>
+  (history.value = history.value.filter((e) => e.id !== entry.id));
diff --git a/frontend/src/global/icons.ts b/frontend/src/global/icons.ts
index 2c5899357..338429a61 100644
--- a/frontend/src/global/icons.ts
+++ b/frontend/src/global/icons.ts
@@ -70,8 +70,8 @@ const icons = [
   fas.faNotesMedical,
   fas.faPersonRunning,
   fas.faScaleBalanced,
-  fas.faSitemap,
   fas.faShareNodes,
+  fas.faSitemap,
   fas.faSquareCheck,
   fas.faSubscript,
   fas.faTable,
diff --git a/frontend/src/pages/PageTestbed.vue b/frontend/src/pages/PageTestbed.vue
index 2831f32a6..2cc156c6c 100644
--- a/frontend/src/pages/PageTestbed.vue
+++ b/frontend/src/pages/PageTestbed.vue
@@ -195,9 +195,6 @@ useEventListener(
   (event: MessageEvent<{ width: number; height: number }>) => {
     const iframe = document.querySelector<HTMLIFrameElement>("iframe");
     if (!iframe) return;
-    iframe.style.maxWidth = "100%";
-    iframe.style.maxHeight = "100%";
-    iframe.style.width = event.data.width + 20 + "px";
     iframe.style.height = event.data.height + 20 + "px";
   },
 );
@@ -359,8 +356,9 @@ const log = console.info;
 
 <style lang="scss" scoped>
 iframe {
-  margin: auto;
+  width: 100%;
 }
+
 .icons {
   color: $theme;
   font-size: 4rem;
diff --git a/frontend/src/pages/about/PageAbout.vue b/frontend/src/pages/about/PageAbout.vue
index c7cceae96..8b5f45d73 100644
--- a/frontend/src/pages/about/PageAbout.vue
+++ b/frontend/src/pages/about/PageAbout.vue
@@ -27,12 +27,6 @@
   <!-- main links to sub pages -->
   <AppSection>
     <AppFlex gap="big">
-      <AppTile
-        to="/overview"
-        icon="cogs"
-        title="Overview"
-        subtitle="How all the pieces of Monarch fit together"
-      />
       <AppTile
         to="https://monarch-app.monarchinitiative.org/"
         icon="code"
diff --git a/frontend/src/pages/explore/PagePhenogrid.vue b/frontend/src/pages/explore/PagePhenogrid.vue
index c38111c46..72d00c4fd 100644
--- a/frontend/src/pages/explore/PagePhenogrid.vue
+++ b/frontend/src/pages/explore/PagePhenogrid.vue
@@ -4,34 +4,31 @@
 
 <template>
   <TheSnackbar />
-  <div ref="container" class="container">
-    <link :href="stylesheet" rel="stylesheet" />
-
-    <!-- analysis status -->
-    <AppStatus v-if="isLoading" code="loading">Running analysis</AppStatus>
-    <AppStatus v-else-if="isError" code="error"
-      >Error running analysis</AppStatus
-    >
-    <AppStatus v-else-if="isEmpty(comparison.phenogrid.cells)" code="warning"
-      >No results</AppStatus
-    >
-
-    <!-- results -->
-    <template v-else>
-      <ThePhenogrid :data="comparison.phenogrid" />
-    </template>
-  </div>
+  <link :href="stylesheet" rel="stylesheet" />
+
+  <!-- analysis status -->
+  <AppStatus v-if="isLoading" code="loading">Running analysis</AppStatus>
+  <AppStatus v-else-if="isError" code="error">Error running analysis</AppStatus>
+  <AppStatus v-else-if="isEmpty(comparison.phenogrid.cells)" code="warning"
+    >No results</AppStatus
+  >
+
+  <!-- results -->
+  <template v-else>
+    <ThePhenogrid :data="comparison.phenogrid" />
+  </template>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { isEmpty } from "lodash";
-import { useEventListener, useResizeObserver } from "@vueuse/core";
+import { useEventListener } from "@vueuse/core";
 import { compareSetToSet } from "@/api/phenotype-explorer";
 import ThePhenogrid from "@/components/ThePhenogrid.vue";
 import TheSnackbar from "@/components/TheSnackbar.vue";
 import { useQuery } from "@/util/composables";
+import { sleep } from "@/util/debug";
 
 /** route info */
 const route = useRoute();
@@ -81,36 +78,33 @@ useEventListener("message", (event: MessageEvent) => {
   }
 });
 
+watch(
+  [isLoading, isError, comparison],
+  async () => {
+    const container = document.body;
+    await sleep(10);
+    if (!container) return;
+    let width = container.scrollWidth + 2;
+    let height = container.scrollHeight + 2;
+    window.parent.postMessage({ width, height }, "*");
+  },
+  { immediate: true, deep: true },
+);
+
 /** allow consuming parent to link to css stylesheet */
 const stylesheet = computed(() =>
   typeof route.query.stylesheet === "string"
     ? window.decodeURIComponent(route.query.stylesheet)
     : "",
 );
-
-const container = ref<HTMLDivElement>();
-
-/** when size of widget changes */
-function onResize() {
-  if (!container.value) return;
-  let width = container.value.scrollWidth + 2;
-  let height = container.value.scrollHeight + 2;
-  window.parent.postMessage({ width, height }, "*");
-}
-useResizeObserver(container, onResize);
 </script>
 
-<style lang="scss" scoped>
-.container {
-  width: max-content;
-  max-width: 100%;
+<style>
+body {
   height: max-content;
-  max-height: 100%;
 }
-</style>
 
-<style>
 #app {
-  align-items: center;
+  display: contents;
 }
 </style>
diff --git a/frontend/src/pages/explore/TabPhenotypeExplorer.vue b/frontend/src/pages/explore/TabPhenotypeExplorer.vue
index 70f8d72d8..068d046cb 100644
--- a/frontend/src/pages/explore/TabPhenotypeExplorer.vue
+++ b/frontend/src/pages/explore/TabPhenotypeExplorer.vue
@@ -135,9 +135,8 @@ import type { Option, Options } from "@/components/AppSelectTags.vue";
 import AppSelectTags from "@/components/AppSelectTags.vue";
 import ThePhenogrid from "@/components/ThePhenogrid.vue";
 import { snackbar } from "@/components/TheSnackbar.vue";
-import { scrollToElement } from "@/router";
+import { scrollTo } from "@/router";
 import { useQuery } from "@/util/composables";
-import { waitFor } from "@/util/dom";
 import { parse } from "@/util/object";
 import examples from "./phenotype-explorer.json";
 
@@ -235,7 +234,7 @@ const {
 
 /** scroll results into view */
 async function scrollToResults() {
-  scrollToElement(await waitFor("#results"));
+  scrollTo("#results");
 }
 
 /** when multi select component runs spread options function */
diff --git a/frontend/src/pages/explore/TabSearch.vue b/frontend/src/pages/explore/TabSearch.vue
index 83222b196..8339b78ea 100644
--- a/frontend/src/pages/explore/TabSearch.vue
+++ b/frontend/src/pages/explore/TabSearch.vue
@@ -108,24 +108,27 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { groupBy, mapValues, sortBy, startCase, uniq } from "lodash";
+import { groupBy, mapValues, sortBy, startCase, uniq, uniqBy } 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 type {
+  Options as AutocompleteOptions,
+  Option,
+} from "@/components/AppSelectAutocomplete.vue";
 import AppSelectAutocomplete from "@/components/AppSelectAutocomplete.vue";
 import type { Options as MultiOptions } from "@/components/AppSelectMulti.vue";
 import AppSelectMulti from "@/components/AppSelectMulti.vue";
 import AppWrapper from "@/components/AppWrapper.vue";
-import { addEntry, deleteEntry, history } from "@/global/history";
+import { deleteEntry, history } from "@/global/history";
 import { appTitle } from "@/global/meta";
 import { useQuery } from "@/util/composables";
 
 type Props = {
   /** whether to show pared down version with just search box */
   minimal?: boolean;
-  /** whether to style search box for header */
+  /** whether search box is in header */
   headerBox?: boolean;
   /** whether to navigate to explore page when focusing search box */
   focusExplore?: boolean;
@@ -162,36 +165,61 @@ async function onFocus() {
   document?.querySelector("input")?.focus();
 }
 
-/** when user "submits" text box */
-function onChange(value: string) {
-  search.value = value;
-  page.value = 0;
+/** when user "submits" search */
+async function onChange(value: string | Option, originalSearch: string) {
+  if (typeof value !== "string" && value.id && value.id !== viewAll.id) {
+    /** go directly to node page of selected option */
+    await router.push("/" + value.id);
+  } else {
+    /** if in header and search cleared, don't navigate away */
+    if (props.headerBox && !originalSearch) return;
+    /** view all results on explore page */
+    await router.push({
+      name: "Explore",
+      query: {
+        search: originalSearch,
+      },
+      hash: "#search",
+    });
+  }
 }
 
 /** when user deletes entry in textbox */
-function onDelete(value: string) {
+function onDelete(value: Option) {
   deleteEntry(value);
 }
 
-/** when user changes selected options */
+/** when user changes selected ƒacet options */
 function onSelectedChange() {
   page.value = 0;
   runGetSearch(false);
 }
 
+/** autocomplete option for viewing all/detailed results on explore page */
+const viewAll: Option = {
+  id: "ALL",
+  label: "View all results...",
+  icon: "arrow-right",
+  // info: "on explore page",
+  special: true,
+};
+
 /** get autocomplete results */
 async function runGetAutocomplete(
   search: string,
 ): Promise<AutocompleteOptions> {
   /** if something typed in, get autocomplete options from backend */
   if (search.trim())
-    return (await getAutocomplete(search)).items.map((item) => ({
-      label: item.name.toLowerCase(),
-      tooltip: "",
-      info:
-        /** show duplicates for gene symbols */
-        item.name === item.symbol ? item.dupes.join(" / ") : undefined,
-    }));
+    return [
+      viewAll,
+      ...(await getAutocomplete(search)).items.map((item) => ({
+        id: item.id,
+        label: item.name,
+        info: item.in_taxon_label || item.id,
+        icon: getCategoryIcon(item.category),
+        tooltip: "",
+      })),
+    ] satisfies AutocompleteOptions;
 
   /**
    * otherwise, if search box focused and nothing is typed in yet, show some
@@ -201,19 +229,19 @@ async function runGetAutocomplete(
   /** show top N entries in each category */
   const top = 5;
 
-  /** recent searches */
-  const recent = uniq([...history.value].reverse())
+  /** recent */
+  const recent: AutocompleteOptions = uniqBy([...history.value].reverse(), "id")
     .slice(0, top)
-    .map((search) => ({
-      label: search,
+    .map((entry) => ({
+      ...entry,
       icon: "clock-rotate-left",
-      tooltip: "One of your recent searches",
+      tooltip: "Node you recently visited",
     }));
 
-  /** most popular searches */
-  const popular = sortBy(
-    Object.entries(groupBy(history.value)).map(([search, matches]) => ({
-      search,
+  /** popular */
+  const popular: AutocompleteOptions = sortBy(
+    Object.entries(groupBy(history.value, "id")).map(([, matches]) => ({
+      entry: matches[0],
       count: matches.length,
     })),
     "count",
@@ -221,21 +249,21 @@ async function runGetAutocomplete(
     .filter(({ count }) => count >= 3)
     .reverse()
     .slice(0, top)
-    .map(({ search }) => ({
-      label: search,
+    .map(({ entry }) => ({
+      ...entry,
       icon: "person-running",
-      tooltip: "One of your frequent node searches",
+      tooltip: "Node you frequently visit",
     }));
 
-  /** example searches */
-  const examples = [
-    "Ehlers-Danlos hypermobility",
-    "SSH",
-    "Multicystic kidney dysplasia",
-  ].map((search) => ({
-    label: search,
+  /** examples */
+  const examples: AutocompleteOptions = [
+    { id: "MONDO:0007523", label: "Ehlers-Danlos hypermobility" },
+    { id: "FB:FBgn0029157", label: "SSH" },
+    { id: "MONDO:0015988", label: "Multicystic kidney dysplasia" },
+  ].map((entry) => ({
+    ...entry,
     icon: "lightbulb",
-    tooltip: "Example search",
+    tooltip: "Example node",
   }));
 
   return [...recent, ...popular, ...examples];
@@ -302,9 +330,6 @@ const {
       dropdownsOptions.value = { ...options };
       dropdownsSelected.value = { ...options };
     }
-
-    /** add search to history */
-    addEntry(search.value);
   },
 );
 
@@ -364,15 +389,6 @@ watch(
   { immediate: true, flush: "post" },
 );
 
-/** when search changes */
-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, hash: "#search" });
-});
-
 /** when start page changes */
 watch(from, () => runGetSearch(false));
 </script>
@@ -429,8 +445,7 @@ watch(from, () => runGetSearch(false));
 }
 
 .header-box {
-  width: 300px;
-  max-width: 100%;
+  width: 100%;
 }
 
 .header-box :deep(input) {
@@ -444,7 +459,7 @@ watch(from, () => runGetSearch(false));
 }
 
 .header-box :deep(.icon) {
-  color: currentColor;
+  color: currentColor !important;
 }
 </style>
 
diff --git a/frontend/src/pages/node/PageNode.vue b/frontend/src/pages/node/PageNode.vue
index 350afcd13..e7740b430 100644
--- a/frontend/src/pages/node/PageNode.vue
+++ b/frontend/src/pages/node/PageNode.vue
@@ -36,14 +36,13 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, watch } from "vue";
+import { onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
 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";
 import SectionExtra from "./SectionExtra.vue";
@@ -65,6 +64,8 @@ const {
   async function () {
     /** get node from route params */
     const { id = "" } = route.params;
+
+    if (!id) return null;
     const node_info = await getNode(String(id));
 
     return node_info;
@@ -75,10 +76,6 @@ const {
 
   /** on success, after data loaded */
   async (results) => {
-    /** scroll to hash */
-    await nextTick();
-    scrollToHash();
-
     /**
      * set page description from node metadata. no need to include category and
      * id, as those should already be in the document title. see
@@ -99,7 +96,7 @@ watch(
   [() => route.fullPath, () => node.value?.name],
   () => {
     appTitle.value = [
-      String(node.value?.name),
+      node.value?.name || String(route.params.id),
       // `${route.params.id} (${route.params.category})`,
       route.query.associations ? `${route.query.associations} assoc.` : "",
     ];
@@ -109,9 +106,19 @@ watch(
 );
 
 /** update node history on node visit */
-watch([() => node.value?.name], () => addEntry(node.value?.name), {
-  immediate: true,
-});
+watch(
+  [() => node.value?.name],
+  () => {
+    if (node.value)
+      addEntry({
+        id: node.value.id,
+        label: node.value.name || "",
+      });
+  },
+  {
+    immediate: true,
+  },
+);
 
 /** get new node data on load */
 onMounted(runGetNode);
diff --git a/frontend/src/pages/node/SectionAssociationDetails.vue b/frontend/src/pages/node/SectionAssociationDetails.vue
index 248d0c23a..70c3af2c5 100644
--- a/frontend/src/pages/node/SectionAssociationDetails.vue
+++ b/frontend/src/pages/node/SectionAssociationDetails.vue
@@ -81,8 +81,7 @@ import AppDetail from "@/components/AppDetail.vue";
 import AppDetails from "@/components/AppDetails.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppPredicateBadge from "@/components/AppPredicateBadge.vue";
-import { scrollToElement } from "@/router";
-import { waitFor } from "@/util/dom";
+import { scrollTo } from "@/router";
 
 type Props = {
   /** current node */
@@ -95,7 +94,7 @@ const props = defineProps<Props>();
 
 /** scroll details section into view */
 async function scrollIntoView() {
-  scrollToElement(await waitFor("#association-details"));
+  scrollTo("#association-details");
 }
 
 watch(() => props.association, scrollIntoView);
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
index e913c620a..6370e0caf 100644
--- a/frontend/src/pages/node/SectionAssociations.vue
+++ b/frontend/src/pages/node/SectionAssociations.vue
@@ -50,11 +50,8 @@ import type { DirectionalAssociation, Node } from "@/api/model";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import type { Option, Options } from "@/components/AppSelectSingle.vue";
 import AppSelectSingle from "@/components/AppSelectSingle.vue";
-import AppTabs from "@/components/AppTabs.vue";
-// import AssociationsSummary from "@/pages/node/AssociationsSummary.vue";
 import AssociationsTable from "@/pages/node/AssociationsTable.vue";
 import SectionAssociationDetails from "@/pages/node/SectionAssociationDetails.vue";
-import { scrollToHash } from "@/router";
 
 /** route info */
 const route = useRoute();
@@ -67,23 +64,6 @@ type Props = {
 
 const props = defineProps<Props>();
 
-/** mode tabs */
-const tabs = [
-  {
-    id: "summary",
-    text: "Summary",
-    icon: "clipboard",
-    tooltip: "Top few associations and high level details",
-  },
-  {
-    id: "table",
-    text: "Table",
-    icon: "table",
-    tooltip: "All association data, in tabular form",
-  },
-];
-const tab = ref(tabs[0].id);
-
 /** selected category of associations to show */
 const category = ref<Option>();
 /** selected association id */
@@ -121,12 +101,10 @@ watch(
 watch(
   () => route.query.associations,
   () => {
-    if (route.query.associations)
-      category.value = categoryOptions.value.find(
-        (option) => option.id === route.query.associations,
-      );
-
-    scrollToHash("associations");
+    if (!route.query.associations) return;
+    category.value = categoryOptions.value.find(
+      (option) => option.id === route.query.associations,
+    );
   },
   { immediate: true },
 );
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 1466c8c4b..0705d1950 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -4,6 +4,7 @@ import { isEmpty, pick } from "lodash";
 import { hideAll } from "tippy.js";
 import descriptions from "@/router/descriptions.json";
 import { sleep } from "@/util/debug";
+import { waitFor } from "@/util/dom";
 import { parse } from "@/util/object";
 
 /** list of routes and corresponding components. */
@@ -68,11 +69,6 @@ export const routes: RouteRecordRaw[] = [
   },
 
   /** about pages */
-  {
-    path: "/overview",
-    name: "Overview",
-    component: () => import("../pages/about/PageOverview.vue"),
-  },
   {
     path: "/cite",
     name: "Cite",
@@ -150,24 +146,7 @@ for (const route of routes) {
 }
 
 /** vue-router's scroll behavior handler */
-const scrollBehavior: RouterScrollBehavior = async (
-  to,
-  from,
-  savedPosition,
-) => {
-  /** https://github.com/vuejs/vue-router-next/issues/1147 */
-  await sleep();
-
-  /** scroll to previous position if exists */
-  if (savedPosition) return savedPosition;
-
-  /** scroll to element corresponding to hash */
-  const element = document?.getElementById(to.hash.slice(1));
-  if (element)
-    return { el: getTarget(element), top: getOffset(), behavior: "smooth" };
-
-  /** otherwise don't change scroll */
-};
+const scrollBehavior: RouterScrollBehavior = async () => {};
 
 /** given element, get (possibly) modified target */
 const getTarget = (element: Element): Element => {
@@ -188,33 +167,30 @@ const getTarget = (element: Element): Element => {
   return element;
 };
 
-/** get offset to account for header */
-const getOffset = () => {
-  const header = document?.querySelector("header");
-  if (header && window.getComputedStyle(header).position === "sticky")
-    header.clientHeight;
-  return 0;
-};
+/** scroll to element by selector */
+export const scrollTo = async (selector: string) => {
+  /** wait for element to appear */
+  const element = await waitFor(selector);
+
+  /** wait for layout shifts */
+  await sleep(100);
 
-/** scroll to element */
-export const scrollToElement = async (element?: Element | null) => {
   if (!element) return;
 
+  /** get height of header */
+  let offset = 0;
+  const header = document?.querySelector("header");
+  if (header && window.getComputedStyle(header).position === "sticky")
+    offset = header.clientHeight;
+
+  /** scroll to element */
   window.scrollTo({
     top:
-      getTarget(element).getBoundingClientRect().top +
-      window.scrollY -
-      getOffset(),
+      getTarget(element).getBoundingClientRect().top + window.scrollY - offset,
     behavior: "smooth",
   });
 };
 
-/** scroll to hash */
-export const scrollToHash = (hash?: string) =>
-  scrollToElement(
-    document?.getElementById(hash || window.location.hash.slice(1)),
-  );
-
 /** navigation history object */
 export const history = createWebHistory(import.meta.env.BASE_URL);
 
@@ -231,10 +207,10 @@ router.beforeEach(() => {
 });
 
 /** on route load */
-router.afterEach(async () => {
-  /** wait for layout shifts */
-  await sleep(1000);
-  scrollToHash();
+router.afterEach(async ({ hash }) => {
+  if (!hash.trim()) return;
+  /** scroll to section once it appears */
+  scrollTo(hash);
 });
 
 export default router;
diff --git a/frontend/src/util/composables.ts b/frontend/src/util/composables.ts
index 79930e8f6..9269cae05 100644
--- a/frontend/src/util/composables.ts
+++ b/frontend/src/util/composables.ts
@@ -1,5 +1,5 @@
 import type { CSSProperties, Ref } from "vue";
-import { nextTick, onMounted, ref, shallowRef, watchEffect } from "vue";
+import { nextTick, onMounted, ref, watchEffect } from "vue";
 import { debounce } from "lodash";
 import { computePosition, flip, shift, size } from "@floating-ui/dom";
 import {
@@ -39,8 +39,8 @@ export const useQuery = <Data, Args extends unknown[]>(
   const isSuccess = ref(false);
 
   /** query results */
+  const data = ref<Data>(defaultValue) as Ref<Data>;
   /** https://github.com/vuejs/composition-api/issues/483 */
-  const data = shallowRef<Data>(defaultValue);
 
   /** latest query id, unique to this useQuery instance */
   let latest;
diff --git a/frontend/unit/AppTextbox.test.ts b/frontend/unit/AppTextbox.test.ts
index 5c377f163..cf5aaa174 100644
--- a/frontend/unit/AppTextbox.test.ts
+++ b/frontend/unit/AppTextbox.test.ts
@@ -3,7 +3,7 @@ import AppTextbox from "@/components/AppTextbox.vue";
 import { emitted, mount } from "./setup";
 
 test("Button clears text", async () => {
-  const props = { modelValue: "dummy text" };
+  const props = { modelValue: "fake text" };
   const wrapper = mount(AppTextbox, { props });
   await wrapper.find("button").trigger("click");
   expect(emitted(wrapper)[0]).toBe("");
diff --git a/frontend/unit/composables.test.ts b/frontend/unit/composables.test.ts
index 36140bccf..f30a0f8c8 100644
--- a/frontend/unit/composables.test.ts
+++ b/frontend/unit/composables.test.ts
@@ -49,7 +49,7 @@ test("Statuses work", async () => {
   expect(isSuccess.value).toBe(true);
 
   /** start another query that will throw error */
-  query({ error: "dummy error" });
+  query({ error: "fake error" });
 
   /** check loading started, and other statuses reset */
   expect(isLoading.value).toBe(true);
@@ -71,8 +71,8 @@ test("Data and default value works", async () => {
   /** check default value */
   expect(data.value).toBe("");
 
-  /** start query that will return dummy data */
-  query({ data: "dummy data" });
+  /** start query that will return fake data */
+  query({ data: "fake data" });
 
   /** data shouldn't be ready yet */
   expect(data.value).toBe("");
@@ -81,10 +81,10 @@ test("Data and default value works", async () => {
   await sleep(20);
 
   /** check data has returned/been set */
-  expect(data.value).toBe("dummy data");
+  expect(data.value).toBe("fake data");
 
   /** start another query that will throw error */
-  query({ data: "dummy data", error: "dummy error" });
+  query({ data: "fake data", error: "fake error" });
 
   /** data should reset to default value */
   expect(data.value).toBe("");