Redesigned download modal, with enhanced data download options

[marcelgerber]

Implements #4015.

Open questions for review:

• (Design) Given that the code examples block is usually below-the-fold anyways, does it being expandable/collapsible even make sense?
• (Design) Should we show csv/zip icons next to the download button as a visual aid?
• (Design) Should there be an easy way to see/copy the csv and metadata link?
• Should we restore explorer downloadDataLink functionality? (see Slack)
  • If not, get rid of downloadDataLink / externalCsvLink code
• Have P&D proof-read all the copy contained in the modal

TODOs

• Make Modal less jumpy when switching tabs / loading
• Redesigned Source citation section, including different copy
• Place copy-able csv/metadata links atop the code examples section
• (Potentially) remove collapse/expand from code examples
• (Potentially) show icon next to button
• Move download options into code examples section
• Make DL buttons download ZIP file for full/current data
• Este's suggestion: "Full/Long" and "short/abbreviated" column names, rather than "verbose"
• Include link to Data API documentation
• Incorporate Slack design feedback
• Incorporate API versioning?
• Check font weights - especially download button descriptions look way heavier than in the design
• Check analytics instrumentation: Make sure we track every interesting click

---

There's quite a large state space, which I want to illustrate here to some degree:

Description	Screenshot	Example URL
"Normal" vis tab		http://staging-site-download-tab-redesign/grapher/life-expectancy
"Normal" data tab		http://staging-site-download-tab-redesign/grapher/life-expectancy http://staging-site-download-tab-redesign/grapher/electricity-prod-source-stacked?country=~DEU
Short names not available (pre-ETL dataset or csv-based explorer)		http://staging-site-download-tab-redesign/grapher/mode-of-reporting-literacy-rates http://staging-site-download-tab-redesign/explorers/migration-flows
Vis download not possible, because on table tab		http://staging-site-download-tab-redesign/grapher/life-expectancy?tab=table
Data is non-redistributable		http://staging-site-download-tab-redesign/explorers/covid?Metric=Variants&Interval=Cumulative&Relative+to+population=true http://staging-site-download-tab-redesign/grapher/suicide-vs-violent-deaths
Server-side csv not available		http://staging-site-download-tab-redesign/explorers/covid

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-download-tab-redesign

• Site-screenshots: https://github.com/owid/site-screenshots/compare/download-tab-redesign
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/download-tab-redesign

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-10-24 10:12:16 UTC
Execution time: 1.15 seconds

[marcelgerber]

@danyx23 Aside from a few small tweaks that came up on Slack, this is now close to being merged. Could you take another quick look?

[danyx23]

Looks very nice, thanks for your tweaks, Marcel! I left a few suggestions for alternative wording. I think this is basically good to go - maybe Marwa could have one last look at it in terms of visual polish.