Vuetify 3 upgrade

[codytodonnell]

Resolves #1573

Upgrades the data portal and submission portal to use Vue 3, Vuetify 3, and Vite.

Notable package replacements:

• vue-async-computed --> vueuse
  • Specifically this replaces the asyncComputed method with the computedAsync feature from vueuse.
• vue2-leaflet --> @vue-leaflet/vue-leaflet
• vue2-leaflet-markercluster --> custom implementation using just @vue-leaflet/vue-leaflet
• @riophae/vue-treeselect --> @zanmato/vue3-treeselect
• vue-cli-plugin-yaml --> @modyfi/vite-plugin-yaml

[JamesTessmer]

I think for the most part everything looks good! On the functional end things are looking good. There are a couple of styling things that popped out to me that seem like they shouldn't be too crazy. I've attached some screenshots with comments below. I haven't done a thorough code review yet, just poked around the front end locally. After posting the comment I wanted to clarify text applies to the picture above it.

• This one is a little funky to show in an image. The dropdown menu 'feels sticky'. For example if I'm on the data portal and navigate to the submission portal the menu seems to stick around a little long, and then if I try to use the status dropdown on the submission it won't open until the other dropdown goes away. I didn't get that same issue with other ui elements, so it might be a pretty niche issue.

• Very nitpicky, but the button containing the minus icon on the multiomics form DOI specifically is visible, while the study form DOI only has the icon visible. I think both should look like what the study form has.

• The 'other' text box on the multi-omics form seems super small.

• Getting raw object data in the status dropdown, and the text box for the drop down seems a little cramped.

• On the data portal the right hand side of this box seems cut off. This only happened while I wasn't logged in. While logged in it looked normal, so that's a little strange.

• Super nitpicky, I think currently on prod the button here is a little smaller and has padding off the bottom of the grey box.

• Similar to the minus button above, the surrounding border for the Orcid login looks a little funky.

• On the /user page the access token box is doing something wild.

I think everything else looks solid!

[pkalita-lbl]

Regarding the DataHarmonizer and Bootstrap-related warnings. When I run this branch locally I can see two type of warnings:

1. Deprecation Warnings emitted when importing Bootstrap scss files. They look like this:

   Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:
   

   This is a known Bootstrap issue that affects even the latest versions of Bootstrap. The Bootstrap docs explicitly recommend silencing the warnings. I confirmed the following works in our vite.config.mts file:

   css: {
     preprocessorOptions: {
       scss: {
         silenceDeprecations: ["color-functions", "global-builtin", "import"]
       }
     }
   },

2. The @charset warnings from postcss. They look like this:

   [vite:css][postcss] @charset must precede all other statements
   397 |    overflow: hidden;                                                                                           
   398 |    outline: 0;                                                                                                 
   399 |  }                                                                                                             
       |  ^                                                                                                             
   400 |  .harmonizer-style-container .modal-dialog {                                                                   
       |  ^^^^^^^^^^^^^^^^                                                                                              
   401 |    position: relative;   
   

   This is an issue that originates in Handsontable (one of the dependencies of DataHarmonizer). The issue has been fixed in Handsontable 15.3.0, but DataHarmonizer still uses 13.x. The good news is that a workaround suggested in the issue comments seems to work. I can make the necessary change in our DataHarmonizer fork and release a new version shortly.

   Edit: I have published version 1.7.1 of @microbiomedata/data-harmonizer if you want to upgrade to that version in this PR.

[codytodonnell]

Thank you both for flagging those issues. They should all be fixed now.

The one issue I couldn't reproduce was the "Search this region" button spacing. That looks normal on my end already.

[JamesTessmer]

Thanks for the update, I’ll give it another look later today or tomorrow. I’ll also double check the “search this region” button to see if it’s something funky on my end causing it.