Basic phenogrid replacement (#360)

Will summarize what this PR does tomorrow, but you can start taking a
look at it now. See `/phenogrid` and `/testbed` and the readme section
added.

.github/workflows/test-frontend.yaml

@@ -57,6 +57,9 @@ jobs:
           path: ${{ env.CACHE_PATH }}
           key: ${{ needs.install-cache.outputs.cache-key }}
 
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
       - name: Run test
         run: yarn build
 
@@ -74,6 +77,9 @@ jobs:
           path: ${{ env.CACHE_PATH }}
           key: ${{ needs.install-cache.outputs.cache-key }}
 
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
       - name: Run test
         run: yarn test:types
 
@@ -91,6 +97,9 @@ jobs:
           path: ${{ env.CACHE_PATH }}
           key: ${{ needs.install-cache.outputs.cache-key }}
 
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
       - name: Run test
         run: yarn test:lint
 
@@ -125,5 +134,8 @@ jobs:
           path: ${{ env.CACHE_PATH }}
           key: ${{ needs.install-cache.outputs.cache-key }}
 
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
       - name: Run test
         run: yarn test:e2e

frontend/.eslintrc.js

@@ -44,5 +44,11 @@ module.exports = {
      */
     "vue/no-v-html": ["off"],
     "vue/no-v-text-v-html-on-component": ["off"],
+    /**
+     * important rule. only disregard in cases where mouse event only adds
+     * non-essentially functionality, e.g. hovering over a table cell to
+     * highlight its row and column.
+     */
+    "vuejs-accessibility/mouse-events-have-key-events": ["off"],
   },
 };

frontend/README.md

@@ -76,7 +76,63 @@ Env var: `VITE_MOCK=true`
 
 Defaults to `false`.
 
-### Style guidelines
+## Phenogrid
+
+The page at `monarchinitiative.org/phenogrid` provides a widget embeddable on any site via an `<iframe>`.
+The widget displays a visual comparison between two sets of phenotypes, and calculates the most and least similar pairs.
+
+Include the widget on your page like so:
+
+```html
+<iframe
+  src="https://monarchinitiative.org/phenogrid?PARAM=VALUE&PARAM=VALUE&PARAM=VALUE"
+  title="Phenogrid"
+  frameborder="0"
+></iframe>
+```
+
+### Parameters
+
+The widget accepts several URL parameters:
+
+- `source` - Comma-separated list of "source" phenotype IDs (set A).
+- `target` - Comma-separated list of "target" phenotype IDs (set B).
+- `stylesheet - A URI-encoded URL to a stylesheet that will be applied to the widget, for the purposes of matching its styles to your webpage.
+
+### Events
+
+The widget also emits `message` events to the parent window when certain things change, and listens for `message` events from the parent window to receive information.
+
+#### Listens for `MessageEvent<{ source: string[], target: string[] }>`
+
+Provide input phenotype lists to the widget when they might be [too long for a URL](https://www.google.com/search?q=max+url+length).
+
+```js
+// get your iframe dom element somehow
+const iframe = document.querySelector("iframe");
+// send it a message
+iframe.contentWindow.postMessage({ source: ["abc"], target: ["def"] }, "*");
+```
+
+#### Emits `MessageEvent<DOMRect>`
+
+Emitted when the size of the widget changes and on load.
+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";
+});
+```
+
+## Style guidelines
 
 Use JSDoc style comments (`/** some comment */`) instead of regular JavaScript comments.
 This allows lint checking and auto-fixing/auto-formatting of long comments wrapping to new lines.

frontend/e2e/app.test.ts

@@ -1,4 +1,7 @@
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
+
+log();
 
 test("App renders", async ({ page }) => {
   await page.goto("/");

frontend/e2e/axe.test.ts

@@ -1,5 +1,8 @@
 import { configureAxe, getViolations, injectAxe } from "axe-playwright";
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
+
+log();
 
 /** pages to test */
 const paths = [

frontend/e2e/feedback.test.ts

@@ -1,4 +1,7 @@
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
+
+log();
 
 test("Feedback form can open and close", async ({ page }) => {
   /** setup */

frontend/e2e/header.test.ts

@@ -1,4 +1,7 @@
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
+
+log();
 
 test("Header nav bar collapses on small screens", async ({ page }) => {
   /** setup */

frontend/e2e/node.test.ts

@@ -1,4 +1,7 @@
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
+
+log();
 
 test("Table of contents works", async ({ page }) => {
   await page.goto("/MONDO:0007523");

frontend/e2e/phenotype-explorer.test.ts

@@ -1,5 +1,8 @@
 import type { Locator } from "@playwright/test";
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
+
+log();
 
 // https://github.com/microsoft/playwright/issues/8114
 export const paste = async (locator: Locator, value: string) => {
@@ -77,9 +80,6 @@ test("Phenotype set vs gene/disease works", async ({ page }) => {
   await expect(page.getByText(/55/i).first()).toBeVisible();
   await expect(page.getByText(/1600029I14Rik/i).first()).toBeVisible();
   await expect(page.getByText(/Mus musculus/i).first()).toBeVisible();
-  await expect(
-    page.locator("svg", { hasText: /Pulmonary artery dilatation/i }).first(),
-  ).toBeVisible();
 });
 
 test("Phenotype set vs phenotype set works", async ({ page }) => {
@@ -101,7 +101,4 @@ test("Phenotype set vs phenotype set works", async ({ page }) => {
     .click();
   await expect(page.getByText(/0/).first()).toBeVisible();
   await expect(page.getByText(/female sterile/).first()).toBeVisible();
-  await expect(
-    page.locator("svg", { hasText: /female sterile/i }).first(),
-  ).toBeVisible();
 });

frontend/e2e/search.test.ts

@@ -1,4 +1,7 @@
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
+
+log();
 
 test("Redirects to explore page from home page", async ({ page }) => {
   /** go to homepage and focus search box */

frontend/e2e/text-annotator.test.ts

@@ -1,7 +1,12 @@
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
 import example from "../src/pages/explore/text-annotator.json";
 
+log();
+
 test("Basic search results show", async ({ page }) => {
+  test.skip(true, "No fixture data yet");
+
   await page.goto("/explore#text-annotator");
 
   /** paste example text */

frontend/e2e/title.test.ts

@@ -1,6 +1,9 @@
 import { expect, test } from "@playwright/test";
+import { log } from "../playwright.config";
 import { sleep } from "../src/util/debug";
 
+log();
+
 test("Document title updates on navigation", async ({ page }) => {
   /** pages to test */
   const pages = ["explore", "about", "help"];

frontend/fixtures/index.ts

@@ -1,5 +1,4 @@
 import { rest } from "msw";
-/** url bases */
 import { biolink, monarch } from "@/api";
 import { feedbackEndpoint } from "@/api/feedback";
 import { efetch, esummary } from "@/api/publications";
@@ -161,25 +160,29 @@ export const handlers = [
   rest.get(/.*/, (req, res, ctx) => {
     /** for certain exceptions, passthrough (let browser make a real request) */
     const exceptions = [
-      ".vue",
-      ".js" /** vite seems to turn dynamic import of images/assets into .js */,
-      ".mp4",
-      ".svg",
-      ".png",
-      ".jpg",
-      ".jpeg",
-      ".gif",
-      ".bmp",
-      ".tiff",
-      ".woff",
-      ".json",
-      ".jsonld",
-      ".txt",
-      "site.webmanifest",
-      "medium.com",
-      "fonts.googleapis.com",
+      /\.vue$/,
+      /\.js$/,
+      /\.ts$/,
+      /\.css$/,
+      /\.scss$/,
+      /\.html$/,
+      /\.mp4$/,
+      /\.svg$/,
+      /\.png$/,
+      /\.jpg$/,
+      /\.jpeg$/,
+      /\.gif$/,
+      /\.bmp$/,
+      /\.tiff$/,
+      /\.woff$/,
+      /\.json$/,
+      /\.jsonld$/,
+      /\.txt$/,
+      /site\.webmanifest/,
+      /medium\.com/,
+      /fonts\.googleapis\.com/,
     ];
-    if (exceptions.some((exception) => req.url.href.includes(exception)))
+    if (exceptions.some((exception) => req.url.href.match(exception)))
       return req.passthrough();
 
     /**