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

@@ -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>

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

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);