Vue3 update and new domain setup

[cnell-usgs]

Description

Update of website from Vue 2 to Vue 3, including updates to vue components to be consistent with current vue 3 website template, and new domain setup for water.usgs.gov/vizlab

Changes Made

• Removes Jenkins build files, dockerfile, build.sh and build instructions.
• Adds VITE_APP_ASSET_URL environment variable that depends on the build tier
• Adds VITE_APP_S3_PROD_URL environment variable pointing to the CloudFront url for our prod bucket on s3
• Corrects template urls pointing to the eventual Vizlab site
• Edit the urls for s3 resources to use the VITE_APP_S3_PROD_URL environment variable
• Core USGS VisID components were replaced with new vue 3 templated versions and structure of subdirectories were reorganized to reflect current vue 3 template
• Components were translated to the composition API; main.js, router, and stores were updated for vue 3
• Instances of require were replaced with a getImageUrl function
• unnecesary gridSVG elements were cleaned to remove console warnings
• Changelog.md was added
• pull_request_template.md was added
• Improved commenting on DrourghtHistory.vue template to differentiate moble and desktop elements; element ids updated to reflect this and correct some unintended duplication of elements in the DOM
• CSS definitions related to text and fonts moved from App.vue to assets and simplified
• reworked the regional interaction to be more similar to vue3 template
• simplified some of the interaction functions while keeping the same function

I did not touch the data pipeline

How to Test

Compare local build to published site at https://labs.waterdata.usgs.gov/visualizations/drought-timeline/index.html#/
Ensure that site functions the same, or better, than existing site, and that site appearance is consistent. Visual changes to the site should only exist for required VisID (e.g. added USGS footer). Verify gsap scrolling timeline works as expected. There were breaking changes with dependency updates which required some reworking of the scroll setup.

Should be tested thoroughly on mobile as well

MR t-shirt size

• extra-small (e.g., update color scheme)
• small (e.g., add tooltip to chart)
• [ X] medium - new domain setup steps have been applied and reviewed in the vue3-template repo. Vue3 switch should be reviewed
• large (e.g., initial data processing pipeline, interactive chart)

Timeline for review

• ASAP - blocker for deployment
• Today - blocker for ongoing work
• Next couple of days
• This week
• [ X] When reviewer has availability

Review Needs

Does this MR include data processing, modeling, or visualization code that will require domain review prior to release?

• Yes, and I have opened an issue to document the need for review, using the DomainReview issue template
• Yes, and a domain review issue already exists
• [ X] No, this has already been reviewed

Related Issues

Provide links to any related issues, including open draft domain review issues.

Additional Notes

Include any extra information or considerations for reviewers.

Merge Request Checklists

• Code changes adhere to best practices documented in README.md
• [ X] Code has been cleaned the way Vue likes it - run npm run lint
• If applicable, the need for future domain review has been documented in an issue
• Below section documents which browsers the site has been tested on:
  • Desktop/laptop
    • [ X] Chrome
    • Safari
    • Edge
    • Firefox
  • Mobile device
    • Chrome
    • Safari
    • Edge
    • Firefox

[hcorson-dosch-usgs]

Thanks for tackling this, Cee. This is a trickier one to convert. It may make sense to use the original url for the upcoming re-release, unless you have time to address the issues noted below.

I've pushed a few minor edits to keep things consistent w/ other repos.

I didn't have time at the moment to dig into the details of the changes is src/components/DroughtHistory.vue, but there were enough apparent issues based on the test site that I'm requesting changes upfront. I think the desktop version is almost there. The mobile version needs a lot of work.

General:

• RC: timeline buttons should have white background, not grey

Desktop:

• RC: fix map image in upper right - is currently doubled:

• In "Drought in Regions of the Conterminous U.S." section,
  • RC: drop black border on svg wedges:
  • RC: when mouse moves off of svg, return to default state with all violins shown at full opacity
  • RC: reduce size of central map:

Mobile

• RC: drop font size to 16 px (1.6rem), instead of 20 px (2rem)
• RC: fix display on load. Currently first paragraph and buttons overflow and overlap bottom panel, possibly just because of font size

• RC: fix display of all annotations. Currently text does not appear in bottom panel throughout site

• RC: Make the map in the upper right stick and ensure updates correctly

• RC: Fix vertical time axis labels and sizing of timeline points - both are too small on mobile (see above screenshot noting lack of annotations)
• RC: Fix mobile implementation of violin plots - it is completely broken at the moment

[cnell-usgs]

• Addressed an issue with matching the selected region to the text and chart elements, resolving mobile issues with lack of text, regional section not working.
• fixed overlap of inset maps on desktop and shifted map positioning so it is not cut off on mobile

[cnell-usgs]

• made button background color white
• fixed mobile landing view

[cnell-usgs]

Removed stroke on region wedges:

[cnell-usgs]

Addressed year labeling, sizing, and point size for timeseries:

[cnell-usgs]

@hcorson-dosch-usgs ready for re-review

[hcorson-dosch-usgs]

Thanks for going back through and addressing things. A few remaining items:

Desktop:

• RC: have default font size be 2rem (20px), not 16px
• In regional section:
  • RC: make center map smaller. it's obscuring data
  • RC: when user stops hovering over chart, make all wedges fully transparent so that all violins are shown.

Mobile:

• Fix vertical time axis labels and sizing of timeline points - both are still too small on mobile
• Reduce top margin of map on stick - currently floats a little too far below the buttons when you scroll - makes it feel randomly placed
• 'Drought in Regions of the Conterminous U.S.' section
  • Add the updating regional title
  • Fix the selection for the Southeast U.S. - currently map is not highlighted

[cnell-usgs]

I adjusted the spacing on the mobile inset map, but on my end it looked different than what you're seeing:

[hcorson-dosch-usgs]

I adjusted the spacing on the mobile inset map, but on my end it looked different than what you're seeing:

strange. that looks good there