Convert new phenogrid to svg (#468)

- update phenogrid readme instructions
- remove some unused fixture json files
- manually add really large phenogrid compare fixture json
- upgrade all packages to latest version. msw 1.0 to 2.0 (only major
bump). refactor to accommodate.
- add some missing toLocaleString() to numbers
- change phenogrid component from table to svg. pros and cons discussed
[here](#372)
- touchup behavior and look of phenogrid. add basic info tooltip. add
transpose feature. rework size event emitting for widget use. download
as svg instead of png
- touchup node page associations section
- fix small bug where clicking association count link in overview
section does not scroll to associations section
- tweak how async route loading is done to avoid flash of homepage while
loading
- add and tweak util funcs

Please take a look at the fixture data is being generated for the
frontend. If it's not being imported at the top of `/fixtures/index.ts`,
it's not being used and doesn't need to be generated.

frontend/README.md

@@ -120,14 +120,9 @@ Useful for setting the dimensions of your iframe container, for example:
 
 ```js
 window.addEventListener("message", (event) => {
-  // get your iframe dom element somehow
   const iframe = document.querySelector("iframe");
-  // some static styles that should probably be on it to prevent overflow
-  iframe.style.maxWidth = "100%";
-  iframe.style.maxHeight = "100%";
-  // dynamically fit dimensions to content (with some padding for possible scroll bars)
-  iframe.style.width = event.data.width + 20 + "px";
-  iframe.style.height = event.data.height + 20 + "px";
+  iframe.style.maxWidth = event.data.width + "px";
+  iframe.style.maxHeight = event.data.height + "px";
 });
 ```
 

frontend/e2e/axe.test.ts

@@ -10,13 +10,12 @@ const paths = [
   "/explore",
   "/about",
   "/help",
-  "/overview",
   "/cite",
   "/team",
   "/publications",
   "/terms",
   "/feedback",
-  "/MONDO:012345",
+  "/MONDO:0007523",
   "/testbed",
 ];
 
@@ -45,7 +44,11 @@ const checkPage =
 
     /** navigate to page */
     await page.goto(path);
+
+    /** wait for content to load */
     await page.waitForSelector("main");
+    await page.waitForSelector("section");
+    await page.waitForSelector("h1");
     await page.waitForTimeout(100);
 
     /** setup axe */

frontend/fixtures/index.ts

@@ -1,10 +1,8 @@
-import { rest } from "msw";
-import { apiUrl, biolink } from "@/api";
+import { http, HttpResponse, passthrough } from "msw";
 import { feedbackEndpoint } from "@/api/feedback";
 import { efetch, esummary } from "@/api/publications";
 import { uptimeRobot } from "@/api/uptime";
 import associationsTable from "./association-table.json";
-import associations from "./associations.json";
 import autocomplete from "./autocomplete.json";
 import feedback from "./feedback.json";
 import histopheno from "./histopheno.json";
@@ -17,68 +15,45 @@ import search from "./search.json";
 import textAnnotator from "./text-annotator.json";
 import uptime from "./uptime.json";
 
-/** make single regex from base url and pattern */
-const regex = (base: string = "", pattern: string = "") =>
-  new RegExp(base + pattern.replace(/[/\\]/g, "\\$&"), "i");
-
 /** api calls to be mocked with fixture data */
 export const handlers = [
   /** api status monitoring on /help */
-  rest.post(regex(uptimeRobot), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(uptime)),
-  ),
+  http.post(uptimeRobot, () => HttpResponse.json(uptime)),
 
   /** histopheno data */
-  rest.get(regex(apiUrl, "/histopheno"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(histopheno)),
-  ),
+  http.get("*/histopheno/:id", () => HttpResponse.json(histopheno)),
 
   /** submit feedback form */
-  rest.post(regex(feedbackEndpoint), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(feedback)),
-  ),
+  http.post(feedbackEndpoint, () => HttpResponse.json(feedback)),
 
   /** search * */
-  rest.get(regex(apiUrl, "/search"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(search)),
-  ),
+  http.get("*/search", () => HttpResponse.json(search)),
 
   /** autocomplete */
-  rest.get(regex(apiUrl, "/autocomplete"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(autocomplete)),
-  ),
+  http.get("*/autocomplete", () => HttpResponse.json(autocomplete)),
 
   /** text annotator */
-  rest.post(regex(biolink, "/nlp/annotate"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(textAnnotator)),
-  ),
+  http.post("*/nlp/annotate", () => HttpResponse.json(textAnnotator)),
 
   /** phenotype explorer */
-  rest.get(regex(biolink, "/sim/search"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(phenotypeExplorerSearch)),
-  ),
-  rest.post(regex(apiUrl, "/semsim/compare"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(phenotypeExplorerCompare)),
+  http.get("*/sim/search", () => HttpResponse.json(phenotypeExplorerSearch)),
+  http.post("*/semsim/compare", () =>
+    HttpResponse.json(phenotypeExplorerCompare),
   ),
 
   /** node associations */
-  rest.get(regex(apiUrl, "/associations"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(associations)),
-  ),
-
-  /** node associations table */
-  rest.get(regex(apiUrl, "/entity/.*/.*"), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(associationsTable)),
+  http.get("*/entity/:id/:assoctype", () =>
+    HttpResponse.json(associationsTable),
   ),
 
   /** node lookup */
-  rest.get(regex(apiUrl, "/entity/.*"), (req, res, ctx) => {
+  http.get("*/entity/:id", ({ params }) => {
+    const id = String(params.id);
+
     /**
      * change fixture data based on request so we can see UI that is conditional
      * on name/category/etc
      */
-    const id = req.url.pathname.match(/\/entity\/(.*)/)?.[1] || "";
-
     const replace: {
       [key: string]: { name?: string; category?: string };
     } = {
@@ -139,20 +114,18 @@ export const handlers = [
     if (name) node.name = name;
     if (category) node.category = category;
 
-    return res(ctx.status(200), ctx.json(node));
+    return HttpResponse.json(node);
   }),
 
   /** node publication info */
-  rest.get(regex(esummary), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(nodePublicationSummary)),
-  ),
-  rest.get(regex(efetch), (req, res, ctx) =>
-    res(ctx.status(200), ctx.json(nodePublicationAbstract.abstract)),
-  ),
+  http.get(esummary, () => HttpResponse.json(nodePublicationSummary)),
+  http.get(efetch, () => HttpResponse.json(nodePublicationAbstract.abstract)),
 
   /** any other request */
-  rest.get(/.*/, (req) => {
-    console.info("Non-mocked request", req.url.pathname);
-    return req.passthrough();
+  http.get("*", ({ request }) => {
+    const { pathname } = new URL(request.url);
+    if (!pathname.match(/\.[A-Za-z0-9]{2,5}$/))
+      console.warn("Non-mocked request", pathname);
+    return passthrough();
   }),
 ];