microbiomedata · marySalvi · Dec 19, 2024 · Dec 19, 2024 · Dec 20, 2024 · Jan 21, 2025
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
@@ -1,9 +1,20 @@
 module.exports = {
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@', './src'],
+        ],
+        extensions: ['.ts', '.js', '.jsx', '.json', '.vue', '.yaml'],
+      },
+    },
+  },
   root: true,
   env: {
     // this section will be used to determine which APIs are available to us
     // (i.e are we running in a browser environment or a node.js env)
     node: true,
+    es2022: true,
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -14,7 +25,9 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:vue/recommended',
-    '@vue/airbnb',
+    'plugin:vuetify/recommended',
+    'plugin:import/typescript',
+    '@vue/eslint-config-typescript',
   ],
   rules: {
     'max-len': 'off',
@@ -47,4 +60,9 @@ module.exports = {
       },
     },
   ],
+  ignorePatterns: [
+    'node_modules',
+    'dist',
+    'public',
+  ],
 };
diff --git a/web/babel.config.js b/web/babel.config.js
diff --git a/web/components.d.ts b/web/components.d.ts
@@ -0,0 +1,109 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppBanner: typeof import('./src/components/AppBanner.vue')['default']
+    AppHeader: typeof import('./src/components/Presentation/AppHeader.vue')['default']
+    AttributeItem: typeof import('./src/components/Presentation/AttributeItem.vue')['default']
+    AttributeList: typeof import('./src/components/Presentation/AttributeList.vue')['default']
+    AuthButton: typeof import('./src/components/Presentation/AuthButton.vue')['default']
+    BinnedSummaryWrapper: typeof import('./src/components/Wrappers/BinnedSummaryWrapper.vue')['default']
+    BulkDownload: typeof import('./src/components/BulkDownload.vue')['default']
+    ChartContainer: typeof import('./src/components/Presentation/ChartContainer.vue')['default']
+    ClusterMap: typeof import('./src/components/ClusterMap.vue')['default']
+    ConditionChips: typeof import('./src/components/Presentation/ConditionChips.vue')['default']
+    DataObjectTable: typeof import('./src/components/DataObjectTable.vue')['default']
+    DateHistogram: typeof import('./src/components/Presentation/DateHistogram.vue')['default']
+    DateInput: typeof import('./src/components/Presentation/DateInput.vue')['default']
+    DownloadDialog: typeof import('./src/components/DownloadDialog.vue')['default']
+    EcosystemSankey: typeof import('./src/components/EcosystemSankey.vue')['default']
+    FacetBarChart: typeof import('./src/components/Presentation/FacetBarChart.vue')['default']
+    FacetedSearch: typeof import('./src/components/FacetedSearch.vue')['default']
+    FacetSummaryWrapper: typeof import('./src/components/Wrappers/FacetSummaryWrapper.vue')['default']
+    FilterDate: typeof import('./src/components/Presentation/FilterDate.vue')['default']
+    FilterFloat: typeof import('./src/components/Presentation/FilterFloat.vue')['default']
+    FilterGene: typeof import('./src/components/FilterGene.vue')['default']
+    FilterList: typeof import('./src/components/Presentation/FilterList.vue')['default']
+    FilterSankeyTree: typeof import('./src/components/FilterSankeyTree.vue')['default']
+    FilterTree: typeof import('./src/components/FilterTree.vue')['default']
+    MenuContent: typeof import('./src/components/MenuContent.vue')['default']
+    OrcidId: typeof import('./src/components/Presentation/OrcidId.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SampleListExpansion: typeof import('./src/components/SampleListExpansion.vue')['default']
+    SearchResults: typeof import('./src/components/Presentation/SearchResults.vue')['default']
+    TeamInfo: typeof import('./src/components/TeamInfo.vue')['default']
+    TimeHistogram: typeof import('./src/components/Presentation/TimeHistogram.vue')['default']
+    TooltipCard: typeof import('./src/components/TooltipCard.vue')['default']
+    UpSet: typeof import('./src/components/Presentation/UpSet.vue')['default']
+    VAlert: typeof import('vuetify/lib')['VAlert']
+    VApp: typeof import('vuetify/lib')['VApp']
+    VAppBar: typeof import('vuetify/lib')['VAppBar']
+    VAutocomplete: typeof import('vuetify/lib')['VAutocomplete']
+    VAvatar: typeof import('vuetify/lib')['VAvatar']
+    VBadge: typeof import('vuetify/lib')['VBadge']
+    VBanner: typeof import('vuetify/lib')['VBanner']
+    VBtn: typeof import('vuetify/lib')['VBtn']
+    VCard: typeof import('vuetify/lib')['VCard']
+    VCardActions: typeof import('vuetify/lib')['VCardActions']
+    VCardSubtitle: typeof import('vuetify/lib')['VCardSubtitle']
+    VCardText: typeof import('vuetify/lib')['VCardText']
+    VCardTitle: typeof import('vuetify/lib')['VCardTitle']
+    VCheckbox: typeof import('vuetify/lib')['VCheckbox']
+    VChip: typeof import('vuetify/lib')['VChip']
+    VCol: typeof import('vuetify/lib')['VCol']
+    VCombobox: typeof import('vuetify/lib')['VCombobox']
+    VContainer: typeof import('vuetify/lib')['VContainer']
+    VDataTable: typeof import('vuetify/lib')['VDataTable']
+    VDatePicker: typeof import('vuetify/lib')['VDatePicker']
+    VDialog: typeof import('vuetify/lib')['VDialog']
+    VDivider: typeof import('vuetify/lib')['VDivider']
+    VExpandTransition: typeof import('vuetify/lib')['VExpandTransition']
+    VExpansionPanel: typeof import('vuetify/lib')['VExpansionPanel']
+    VExpansionPanelContent: typeof import('vuetify/lib')['VExpansionPanelContent']
+    VExpansionPanelHeader: typeof import('vuetify/lib')['VExpansionPanelHeader']
+    VExpansionPanels: typeof import('vuetify/lib')['VExpansionPanels']
+    VForm: typeof import('vuetify/lib')['VForm']
+    VIcon: typeof import('vuetify/lib')['VIcon']
+    VImg: typeof import('vuetify/lib')['VImg']
+    VList: typeof import('vuetify/lib')['VList']
+    VListItem: typeof import('vuetify/lib')['VListItem']
+    VListItemAction: typeof import('vuetify/lib')['VListItemAction']
+    VListItemAvatar: typeof import('vuetify/lib')['VListItemAvatar']
+    VListItemContent: typeof import('vuetify/lib')['VListItemContent']
+    VListItemIcon: typeof import('vuetify/lib')['VListItemIcon']
+    VListItemSubtitle: typeof import('vuetify/lib')['VListItemSubtitle']
+    VListItemTitle: typeof import('vuetify/lib')['VListItemTitle']
+    VMain: typeof import('vuetify/lib')['VMain']
+    VMenu: typeof import('vuetify/lib')['VMenu']
+    VNavigationDrawer: typeof import('vuetify/lib')['VNavigationDrawer']
+    VPagination: typeof import('vuetify/lib')['VPagination']
+    VProgressCircular: typeof import('vuetify/lib')['VProgressCircular']
+    VProgressLinear: typeof import('vuetify/lib')['VProgressLinear']
+    VRadio: typeof import('vuetify/lib')['VRadio']
+    VRadioGroup: typeof import('vuetify/lib')['VRadioGroup']
+    VRow: typeof import('vuetify/lib')['VRow']
+    VSelect: typeof import('vuetify/lib')['VSelect']
+    VSkeletonLoader: typeof import('vuetify/lib')['VSkeletonLoader']
+    VSnackbar: typeof import('vuetify/lib')['VSnackbar']
+    VSpacer: typeof import('vuetify/lib')['VSpacer']
+    VStepper: typeof import('vuetify/lib')['VStepper']
+    VStepperHeader: typeof import('vuetify/lib')['VStepperHeader']
+    VStepperStep: typeof import('vuetify/lib')['VStepperStep']
+    VSubheader: typeof import('vuetify/lib')['VSubheader']
+    VSwitch: typeof import('vuetify/lib')['VSwitch']
+    VTab: typeof import('vuetify/lib')['VTab']
+    VTabItem: typeof import('vuetify/lib')['VTabItem']
+    VTabs: typeof import('vuetify/lib')['VTabs']
+    VTabsItems: typeof import('vuetify/lib')['VTabsItems']
+    VTextarea: typeof import('vuetify/lib')['VTextarea']
+    VTextField: typeof import('vuetify/lib')['VTextField']
+    VToolbar: typeof import('vuetify/lib')['VToolbar']
+    VTooltip: typeof import('vuetify/lib')['VTooltip']
+  }
+}
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script type="module" src="/src/main.ts"></script>
+    <link rel="icon" href="/favicon.ico">
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <title>NMDC</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but nmdc-pilot doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/web/jsconfig.json b/web/jsconfig.json
diff --git a/web/package.json b/web/package.json
@@ -4,19 +4,18 @@
   "private": true,
   "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"
+    "lint:fix": "eslint . --fix",
+    "dev": "vite --host 127.0.0.1 --port 8081",
+    "build": "vite build"
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
     "@sentry/vue": "^6.16.1",
-    "@vue/composition-api": "^1.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",
     "d3": "^7.2.1",
     "d3-array": "^3.1.1",
     "d3-axis": "^3.0.0",
@@ -38,17 +37,22 @@
     "popper.js": "1.16.1",
     "protobufjs": "^6.11.3",
     "serialize-javascript": "^6.0.0",
-    "vue": "^2.6.14",
+    "vite": "4",
+    "vite-plugin-vue2": "^2.0.3",
+    "vue": "^2.7.0",
     "vue-async-computed": "^3.9.0",
-    "vue-google-charts": "^0.3.3",
+    "vue-google-charts": "^0.4",
     "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",
-    "xlsx": "^0.17.5"
+    "xlsx": "^0.17.5",
+    "yaml": "^2.7.0"
   },
   "devDependencies": {
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
+    "@rollup/plugin-yaml": "^4.1.2",
     "@types/axios": "^0.14.0",
     "@types/d3": "^7.1.0",
     "@types/d3-array": "^3.0.2",
@@ -61,26 +65,20 @@
     "@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",
+    "@vitejs/plugin-vue2": "^2.3.3",
     "@vue/eslint-config-typescript": "^9.1.0",
-    "babel-eslint": "^10.0.3",
-    "copy-webpack-plugin": "^6.4.0",
-    "eslint": "^7.32.0",
+    "eslint": "8",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "8",
     "eslint-plugin-vuejs-accessibility": "^1.1.0",
-    "raw-loader": "^4.0.2",
-    "sass": "~1.32.0",
-    "sass-loader": "^10.1.1",
+    "eslint-plugin-vuetify": "^1.1.0",
+    "js-yaml": "^4.1.0",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
     "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"
+    "unplugin-vue-components": "^28.0.0",
+    "vue-template-compiler": "^2.7.16"
   },
   "browserslist": [
     "> 1%",
@@ -91,5 +89,5 @@
     "serialize-javascript": "^3.1",
     "http-proxy": "1.18.1"
   },
-  "packageManager": "[email protected].19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+  "packageManager": "[email protected].21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }
diff --git a/web/public/index.html b/web/public/index.html
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted } from '@vue/composition-api';
+import { defineComponent, onMounted, onUnmounted } from 'vue';
 import AppHeader from '@/components/Presentation/AppHeader.vue';
 import { stateRefs, init } from '@/store/';
 import { useRouter } from '@/use/useRouter';

diff --git a/web/src/components/AppBanner.vue b/web/src/components/AppBanner.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
+import { computed, defineComponent } from 'vue';
 import { stateRefs } from '@/store';
 
 export default defineComponent({
@@ -21,7 +21,7 @@ export default defineComponent({
     class="ma-4"
   >
     <p
-      class="title"
+      class="text-h6"
     >
       {{ title || '' }}
     </p>

diff --git a/web/src/components/BulkDownload.vue b/web/src/components/BulkDownload.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import { computed, defineComponent, ref } from 'vue';
 // @ts-ignore
 import Treeselect from '@riophae/vue-treeselect';
 import { stateRefs, dataObjectFilter } from '@/store';

diff --git a/web/src/components/ClusterMap.vue b/web/src/components/ClusterMap.vue
@@ -2,7 +2,7 @@
 import {
   computed,
   defineComponent, PropType, reactive, ref, toRef, watch, watchEffect,
-} from '@vue/composition-api';
+} from 'vue';
 
 /**
  * LEAFLET imports

diff --git a/web/src/components/DataObjectTable.vue b/web/src/components/DataObjectTable.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import {
   computed, defineComponent, PropType, reactive,
-} from '@vue/composition-api';
+} from 'vue';
 import { flattenDeep } from 'lodash';
 
 import { DataTableHeader } from 'vuetify';

diff --git a/web/src/components/DownloadDialog.vue b/web/src/components/DownloadDialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api';
+import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
   props: {