Vuetify 3 upgrade

docs/development.md

@@ -240,11 +240,20 @@ docker compose up --build -d
 
 ### Running with frontend development server
 
+You will need Node version 22 or greater to install and run the web app locally. You can find installation instructions here: https://nodejs.org/en/download. If you're on a Mac, it is recommended to use nvm to install and manage your node versions.
+
+If you have nvm installed, you can run the following command at the root of the `web` directory to use the Node version specified in our `.nvmrc` file:
+
+```bash
+nvm use
+```
+
 If you are modifying files in the `web` directory, additionally run the frontend development server to enable hot reloading in your browser:
 
 ```bash
 cd web
-yarn serve
+yarn install
+yarn dev
 ```
 
 <details>

web/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

web/.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

web/.gitignore

@@ -11,6 +11,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea

web/.nvmrc

@@ -0,0 +1 @@
+v24.9.0

web/README.md

@@ -1,6 +1,6 @@
 # NMDC Data Portal
 
-Follow setup instructions in `../README.md` first.
+Follow setup instructions in the [Development Docs](/docs/development.md).
 
 ## Client architecture
 
@@ -16,5 +16,4 @@ Some components, like `src/views/Search/FilterList` use lazy-load of data that c
 
 ## Stateless requests
 
-This application serves data from a stateless database, so queries can be cached, and many requests only need to be loaded once.
-
+This application serves data from a stateless database, so queries can be cached, and many requests only need to be loaded once.

web/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
+
+declare module '*.yaml' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.yml' {
+  const content: any;
+  export default content;
+}

web/eslint.config.js

@@ -0,0 +1,75 @@
+import js from '@eslint/js';
+import vue from 'eslint-plugin-vue';
+import typescript from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import vueParser from 'vue-eslint-parser';
+import globals from 'globals';
+
+export default [
+  // Ignore build output directories
+  {
+    ignores: ['**/dist/**', '**/node_modules/**', '**/build/**'],
+  },
+  js.configs.recommended,
+  ...vue.configs['flat/recommended'],
+  {
+    files: ['**/*.{js,mjs,cjs,vue,ts}'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: typescriptParser,
+        ecmaVersion: 2020,
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    rules: {
+      'max-len': 'off',
+      'no-underscore-dangle': 0,
+      'spaced-comment': 'off',
+      'vuejs-accessibility/anchor-has-content': 'off',
+      'vuejs-accessibility/click-events-have-key-events': 'off',
+      'vue/no-dupe-keys': 'off',
+      'vue/no-v-html': 'off',
+      // See: https://github.com/vuejs/eslint-plugin-vue/issues/365
+      // The issue is supposed to be resolved, but eslint complains without the ignore
+      'vue/html-indent': ['warn', 2, { ignores: ['VElement[name=pre].children'] }],
+      'camelcase': 0,
+      // we should always disable console logs and debugging in production
+      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.vue'],
+    plugins: {
+      '@typescript-eslint': typescript,
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          vars: 'all',
+          args: 'after-used',
+          ignoreRestSiblings: true,
+        },
+      ],
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+      'no-shadow': 'off',
+    },
+  },
+];

web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NMDC</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

web/package.json

@@ -1,23 +1,31 @@
 {
-  "name": "nmdc-server",
-  "version": "0.1.0",
+  "name": "web",
   "private": true,
+  "type": "module",
+  "version": "0.0.0",
   "scripts": {
-    "serve": "rimraf -rf ./node_modules/.cache/vue-loader && vue-cli-service serve --host 127.0.0.1 --port 8081 src/main.ts",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@microbiomedata/data-harmonizer": "^1.7.0",
-    "@riophae/vue-treeselect": "^0.4.0",
-    "@sentry/vue": "^6.16.1",
-    "@vue/composition-api": "^1.4.1",
+    "@fontsource/roboto": "5.2.7",
+    "@mdi/font": "7.4.47",
+    "@microbiomedata/data-harmonizer": "^1.7.1",
+    "@sentry/vue": "^10.24.0",
+    "@types/lodash": "^4.17.20",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
+    "@vueuse/core": "^13.9.0",
+    "@zanmato/vue3-treeselect": "^0.4.1",
     "axios": "^0.28.0",
     "axios-cache-adapter": "^2.7.3",
     "bootstrap": "4.3.1",
     "chrono-node": "^2.4.1",
     "citation-js": "^0.5.4",
-    "core-js": "^3.19.3",
+    "core-js": "^3.45.1",
     "d3": "^7.2.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
@@ -38,58 +46,32 @@
     "popper.js": "1.16.1",
     "protobufjs": "^6.11.3",
     "serialize-javascript": "^6.0.0",
-    "vue": "^2.6.14",
-    "vue-async-computed": "^3.9.0",
-    "vue-google-charts": "^0.3.3",
-    "vue-gtag": "^1.16.1",
-    "vue-router": "^3.5.3",
-    "vue2-leaflet": "^2.7.1",
-    "vue2-leaflet-markercluster": "^3.1.0",
-    "vuetify": "^2.6.10",
+    "vue": "^3.5.21",
+    "vue-google-charts": "^1.1.0",
+    "vue-gtag": "^3.6.3",
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.10.1",
     "xlsx": "^0.17.5"
   },
   "devDependencies": {
-    "@types/axios": "^0.14.0",
-    "@types/d3": "^7.1.0",
-    "@types/d3-array": "^3.0.2",
-    "@types/d3-brush": "^3.0.1",
-    "@types/d3-scale": "^4.0.2",
-    "@types/d3-selection": "^3.0.2",
-    "@types/d3-time-format": "^4.0.0",
-    "@types/leaflet": "^1.7.6",
-    "@types/linkify-it": "^3.0.2",
-    "@types/lodash": "^4.14.178",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-eslint": "^4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
-    "@vue/eslint-config-airbnb": "^6.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "babel-eslint": "^10.0.3",
-    "copy-webpack-plugin": "^6.4.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-vue": "^8.2.0",
-    "eslint-plugin-vuejs-accessibility": "^1.1.0",
-    "raw-loader": "^4.0.2",
-    "sass": "~1.32.0",
-    "sass-loader": "^10.1.1",
-    "typescript": "^4.5.3",
-    "vue-cli-plugin-vuetify": "^2.4.5",
-    "vue-cli-plugin-yaml": "^1.0.2",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify-loader": "^1.7.3"
+    "@modyfi/vite-plugin-yaml": "^1.1.1",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/leaflet": "^1.9.21",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.35.0",
+    "eslint-config-vuetify": "^4.2.0",
+    "globals": "^16.5.0",
+    "npm-run-all2": "^8.0.4",
+    "sass-embedded": "^1.92.1",
+    "typescript": "~5.9.2",
+    "unplugin-fonts": "^1.4.0",
+    "unplugin-vue-components": "^29.0.0",
+    "unplugin-vue-router": "^0.15.0",
+    "vite": "^7.1.5",
+    "vite-plugin-vuetify": "^2.1.2",
+    "vue-tsc": "^3.0.7"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
-  "resolutions": {
-    "node-forge": "^1.3.0",
-    "serialize-javascript": "^3.1",
-    "http-proxy": "1.18.1"
-  },
-  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+  "packageManager": "yarn@1.22.22+sha256.c17d3797fb9a9115bf375e31bfd30058cac6bc9c3b8807a3d8cb2094794b51ca"
 }