PrimeVue upgrade and addition of TailwindCSS

[davereinhart]

This branch upgrades PrimeVue from v3 to v4 and adds TailwindCSS package to simplify styling going forward.

This upgrade impacted a number of pages due to breaking changes related to the redesign of the Stepper component in PrimeVue 4, as well as differences in themes/CSS between the two versions. The TabView component is also marked as deprecated in PrimeVue 4 and is being replaced by the Tabs component.

Changes in this branch seek to maintain the look and feel of the current version of MaveDB, which required retaining the PrimeVue3 theme.css file. Use of PrimeVue3's CSS with PrimeVue4 isn't ideal, but it is used here to expedite the transition without drastically changing the current style of the site or reworking every component. An effort to fully transition to PrimeVue 4 theme and tailwind CSS classes, and phase out the use of the theme.css file is warranted, but can be tackled in a separate branch or more gradually as part of future releases.

[bencap]

Thanks for working on this Dave! The new components look a lot more modern.

Some things I noticed when walking through the site, broken down by screen/component. Some of these may fit better as separate issues rather than being addressed in the migration, but I figured I'd capture them anyway while I was taking the time to look.

HomeScreen

• We lost the centering of the MaveMD logo in the centered banner at the top of the page.
• There might not be a default first index on the score set highlights tab view (which seems to not matter in primevue3). This causes the whole Tab view to be underlined, compared to the target gene highlights where the appropriate tab is underlined.
• There's no longer any interface feedback for the current page on the paginator.
• We lost the formatting of the MaveDB citation at the bottom of the page (We may just need similar changes here to the ones you made on the About page).
• This might be how it looked before, I forget, but we should align the bottom of the first three dialog boxes so it looks a little more put together.

MaveMD search screen

• Admittedly extremely minor, but the drop down options seem to not be aligned along the center line.
• Perhaps we should make the 'Position' input box an input number instead.

MaveMD variant page (I was on /variants/CA10590195)

• Same default first index issue on the tab view of variants at the top of the page.
• The (i) info mouse over tooltips are stretched

Experiment creator

• Not an issue, but I guess I just don't love how the edit/preview component looks for the free text metadata. To me it was clearer before what it was doing. Is it possible for the component to look more unified so it was clearer they controlled the view? It might not be trivial, so if not it's probably not worth worrying about.
• The way the chips look when a DOI/Contributor/RawRead/Publication is entered makes it look like it's just text instead of an object. I liked how the old one showed them as distinct resources.
• The help text for the Orcid ID entry in the contributors field doesn't go away even after losing focus, which is distracting to me.
• The publication identifier autocomplete lost the dynamic slots that gave additional context to each publication identifier. This context is still available in the primary publication dropdown though.
• After selecting a primary publication, it appears unselected after the dropdown loses focus. It still is selected when the component regains focus, but it is visually confusing.
• When adding a description to the keywords, it would be nice if the description entry box and the dropdown had the same width.

Experiment editor

• Same issues with the chips not really appearing like chips in fields like DOI.
• This has an example of what I was talking about above with the edit/preview tab looking like it is actually a part of the abstract and method components. To me it's clearer here that they control the view.
• Same issue with the primary publication appearing unselected.
• There's also no way to remove a keyword without clearing them all, which I don't think is a regression but probably something we should add.

Experiment viewer

• The ORCID logo is no longer aligned with user's names.
• Score sets are no longer formatted as a list.
• References are formatted as lists, but their alignment is odd, such that the bullets are to the left of what seems should be the viewports edge.

Score set creator
parent experiment and context

• The stepper panel is indexed to zero rather than 1.
• The experiment dropdown is good, but the score set search is unformatted, which results in JSON objects being displayed in the autocomplete.
  score set information
• The same comments as on the experiment editor apply here.
• There is no edit/preview control on the methods section, so it gets displayed below.
  target N (sequence based)
• The copy from existing target autocomplete is unformatted, which results in JSON objects being displayed in the autocomplete.
• The external identifier linkers used to be searches, but don't seem to be autocompleting for me anymore.
• The taxonomy autocomplete is unformatted, which results in JSON objects being displayed in the autocomplete.
  score calibrations
• The upper/lower bound boxes don't span as far as they need, so the input group looks strange and unfriendly to interact with.
• The criterion and evidence strength dropdowns also don't span as far as they ought to.
• I think it would be best if the delete button to remove functional ranges was red, but probably an X is clear enough.
• Same comment on the chips from other screens applies to these publication lists.

Score set editor

• Same comments as experiment editor, with the exception of the keyword comment not being applicable.

Score set viewer

• Same ORCID issue as with experiments.
• Here the primary references are aligned appropriately, but not the secondary ones.
• Tab view has no default value for the variants table.
• The progress bar having percent is nice!

Score set calibrations

• The more pastel like colors causes the chip tabs to get washed out. We should consider making these have more contrast. Additionally, some seem to have lost their color altogether.
• There are some very subtle coloring differences in the calibration table background that I think make the table pop a little less in the upgraded branch. Whereas on the previous view the table background was white and certain columns got grey backgrounds to give them subtle visual prominence, now the whole background is grey.

Collection score-set / experiment editor

• This seems to have a good example of the primevue4 chips that I've mentioned a few times.

Settings

• The Welcome to MaveDB page title lost it's formatting and is small now.

Statistics view

• The cards in the scrolling marquee seem to have lost some of their styling and are now just a black box (not that the ones before looked awesome or anything).
• Same issue with the paginator not showing the current page as with the home page.

Site wide comments

• Certain dialog boxes seem to have lost the button coloring we used to have when things were tagged with danger, although some do still have different colored buttons for different actions.
• There appears to be slightly more padding in the Toolbar, which doesn't matter that much when it's a single line but makes it look kind of chunky when it's multi-line.