Frontend base

.github/workflows/test-frontend.yaml

@@ -0,0 +1,69 @@
+name: Test Frontend
+
+on:
+  pull_request:
+    paths:
+      - "frontend/**"
+      - "package.json"
+
+defaults:
+  run:
+    working-directory: ./frontend
+
+jobs:
+  # test that app can build without issues
+  test-build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bunx msw init && bun install
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Run test
+        run: bun run build
+
+  # test that app has no typescript errors
+  test-types:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bunx msw init && bun install
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Run test
+        run: bun run test:types
+
+  # test that app is properly formatted and linted
+  test-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install packages
+        run: bunx msw init && bun install
+
+      - if: runner.debug == '1'
+        uses: mxschmitt/action-tmate@v3
+
+      - name: Run test
+        run: bun run test:lint

README.md

@@ -1,2 +0,0 @@
-# MolEvolvR 2.0
-WIP new molevolvr app

app/.env

@@ -0,0 +1,5 @@
+VITE_TITLE=MolEvolvR
+VITE_DESCRIPTION=A web app characterizing proteins using molecular evolution and phylogeny
+VITE_URL=https://molevolvr.org
+VITE_API=https://api.molevolvr.org
+

app/.eslintignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+mockServiceWorker.js

app/.eslintrc

@@ -0,0 +1,21 @@
+{
+  "root": true,
+  "env": { "browser": true, "es2020": true },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "ignorePatterns": ["dist", ".eslintrc.cjs"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-refresh", "prettier"],
+  "rules": {
+    "prettier/prettier": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "react-refresh/only-export-components": ["off"],
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "@typescript-eslint/consistent-type-imports": "error"
+  }
+}

app/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+mockServiceWorker.js

app/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+mockServiceWorker.js

app/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "./node_modules/prettier-plugin-jsdoc/dist/index.js",
+    "prettier-plugin-css-order"
+  ],
+  "importOrder": [
+    "^react",
+    "^[a-zA-Z]",
+    "^@[a-zA-Z]",
+    "^@/",
+    "^/",
+    "^./",
+    "^../"
+  ],
+  "cssDeclarationSorterOrder": "smacss",
+  "jsdocCapitalizeDescription": false,
+  "htmlWhitespaceSensitivity": "strict"
+}

app/.vscode/extensions.json

@@ -0,0 +1,17 @@
+{
+  "recommendations": [
+    "steoates.autoimport",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "pflannery.vscode-versionlens",
+    "yoavbls.pretty-ts-errors",
+    "streetsidesoftware.code-spell-checker"
+    // "eamodio.gitlens",
+    // "bennycode.sort-everything",
+    // "ms-vscode.live-server",
+    // "christian-kohler.path-intellisense",
+    // "Tyriar.sort-lines",
+    // "nmsmith89.incrementor",
+    // "janisdd.vscode-edit-csv",
+  ]
+}

app/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "eslint.debug": true,
+  "eslint.format.enable": true,
+  "eslint.validate": ["react", "javascript", "typescript"],
+  "eslint.workingDirectories": ["app"],
+  "files.associations": {
+    "*.svg": "html"
+  }
+}

app/README.md

@@ -0,0 +1,79 @@
+# Frontend
+
+This project was scaffolded using Vite, and has the following key features:
+
+- React 18
+- TypeScript, for static type checking
+- ESLint, for code quality
+- Prettier, for code formatting
+
+## Requirements
+
+- [Bun](https://bun.sh/)
+
+## Commands
+
+| Command           | Description                                       |
+| ----------------- | ------------------------------------------------- |
+| `bun install`     | Install packages                                  |
+| `bun run dev`     | Start local dev server with hot-reloading         |
+| `bun run build`   | Build production version of app                   |
+| `bun run preview` | Serve built version of app (must run build first) |
+| `bun run lint`    | Fix linting and formatting                        |
+| `bun run test`    | Run tests                                         |
+
+## Usage
+
+See the "testbed" page for an overview of what formatting/elements/components/etc. you can use and how.
+
+## Background
+
+- **[HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference)**.
+  Static markup that defines the "content" of a page/document.
+  Consists of nested [tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) with [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) that become the [DOM](https://developer.mozilla.org/en-US/docs/Glossary/DOM).
+
+- **[CSS](https://developer.mozilla.org/en-US/docs/Web/css/Reference)**.
+  [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors) and [styles](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) that determine how the content of your page looks and is laid out.
+  [Modules](https://vitejs.dev/guide/features.html#css-modules) should be used to keep styles scoped to a particular file and avoid selector name collisions.
+
+- **[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)**.
+  A dynamic, loosely-typed, general-purpose language that runs in a browser when a user visits a page.
+  It can dynamically manipulate the document/styles, make network requests, and interact with the browser in [a multitude of other ways](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs).
+
+_These 👆 are the only things that a browser can natively understand_ (and assets like images, videos, etc.).
+Anything else 👇 is abstraction or convenience built on top of them, and must first go through a "compilation"/"build" step to transform it into one of the three core things.
+
+- **[React](https://react.dev/learn)**.
+  A widely popular and plugin-rich JavaScript library that makes it easier to generate HTML on the page, keep it in sync with data, handle events, and more.
+  In general, it makes code more readable, robust, and re-usable.
+  The [JSX](https://react.dev/learn/writing-markup-with-jsx) syntax is used to write dynamic content in a more declarative, clear way.
+  Pieces of content are split into cleanly separated "components".
+  A component is a generic term for any function that returns HTML to be generated, and it can range from low level (e.g. button, select dropdown, table) to high-level (e.g. tab group, section, page).
+
+- **[TypeScript](https://en.wikipedia.org/wiki/TypeScript)**.
+  A superset of JavaScript that makes it strongly, statically typed so you can catch errors before even running the code.
+  Adds some additional overhead/complexity, but is especially essential for apps dealing with complex data structures.
+
+- **[Vite](https://vitejs.dev/)**.
+  A multi-purpose tool that handles coordination of the various other technologies.
+  Most notably, it handles running the app locally for development (with fast automatic refresh), transpiling TypeScript into plain JavaScript, and "compiling" the app into a production/browser-ready bundle.
+
+- **[Node](https://nodejs.org/en/)**.
+  An environment for running JavaScript locally instead of in a browser.
+  Has APIs that browsers cannot have, such as filesystem access, and lacks some of the APIs browsers do have, such as functions to manipulate the DOM (there is no DOM or browser).
+  That is, not all Node code can run in the browser, and vice-versa.
+  Vite and other packages that do things locally are ultimately intended to run on top of this.
+
+- **[Bun](https://bun.sh/)**.
+  A very new tool that aims to be an all-in-one replacement for Node, Yarn, Vite, and many other tools.
+  Since it is so new, in this project will only use it as a runtime (replacement for Node) and package manager (replacement for Yarn).
+  If you encounter issues, install [Node](https://nodejs.org/en) (`v18` or later) and try running the above commands with `npm` instead of `bun`.
+  Do not use functionality that is Bun-only (not "backwards-compatible" with Node).
+
+- **[ESLint](https://eslint.org/)**.
+  A tool that checks JavaScript code for common pitfalls, mostly focused on things that _affect functionality_ rather than code aesthetics.
+
+- **[Prettier](https://prettier.io/)**.
+  A tool that formats JavaScript code to make it look pretty.
+  Useful for enforcing consistency, avoiding bike-shedding, and writing code more quickly without worrying about formatting.
+  _Only affects code aesthetics_, and should not affect functionality.

app/fixtures/analyses.json

@@ -0,0 +1,26 @@
+[
+  {
+    "id": "a1b2c3",
+    "name": "Fake Analysis A",
+    "type": "fasta",
+    "info": "Lorem ipsum",
+    "started": "2023-11-29T23:19:34.390Z",
+    "status": { "type": "analyzing", "info": "Step 5 of 7" }
+  },
+  {
+    "id": "d4e5f6",
+    "name": "Fake Analysis B",
+    "type": "blast",
+    "info": "Dolor amet",
+    "started": "2022-11-28T23:19:34.390Z",
+    "status": { "type": "complete", "info": "Took 3:14:15" }
+  },
+  {
+    "id": "g7h8i9",
+    "name": "Fake Analysis C",
+    "type": "interproscan",
+    "info": "Alqua",
+    "started": "2023-10-29T23:19:34.390Z",
+    "status": { "type": "error", "info": "Server error" }
+  }
+]

app/fixtures/index.ts

@@ -0,0 +1,25 @@
+import { http, HttpResponse, passthrough } from "msw";
+import type { HttpResponseResolver } from "msw";
+import analyses from "./analyses.json";
+import stats from "./stats.json";
+
+const nonMocked: HttpResponseResolver = ({ request }) => {
+  console.debug("Non-mocked request", new URL(request.url).pathname);
+  return passthrough();
+};
+
+/** api calls to be mocked (faked) with fixture data */
+export const handlers = [
+  http.get("*/stats", () => HttpResponse.json(stats)),
+
+  http.get("*/analysis/:id", ({ params }) => {
+    const id = String(params.id);
+    const lookup = analyses.find((analysis) => analysis.id === id);
+    if (!lookup) return new HttpResponse(null, { status: 404 });
+    else return HttpResponse.json(lookup);
+  }),
+
+  /** any other request */
+  http.get(/.*/, nonMocked),
+  http.post(/.*/, nonMocked),
+];

app/fixtures/stats.json

@@ -0,0 +1,5 @@
+{
+  "running": 12,
+  "performed": 234,
+  "proteins": 123123
+}