From 1f9008e07259a0308f1680ada2891f2a342d4990 Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Fri, 9 Aug 2024 18:53:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20improve=20download=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/modal/DownloadModal.tsx       | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
index 5b9f71f510c..adab4445fd6 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
@@ -325,11 +325,18 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
         }
 
         const csvUrl = this.csvFileUrl
+        const metadataUrl = csvUrl.replace(".csv", ".metadata.json")
 
         const googleDocsCode = `=IMPORTDATA("${csvUrl}")`
 
         const pandasCode = `import pandas as pd
-df = pd.read_csv("${csvUrl}")`
+import requests
+
+# Fetch the data
+df = pd.read_csv("${csvUrl}")
+
+# Fetch the metadata
+metadata = requests.get("${metadataUrl}").json()`
 
         const rCode = `df <- read.csv("${csvUrl}")`
         return (
@@ -416,9 +423,18 @@ df = pd.read_csv("${csvUrl}")`
                         </div>
                     ) : (
                         <>
+                            <h4>Source</h4>
+                            <p>
+                                Whenever you use this data in a public context,
+                                please make sure to credit the original source
+                                and to verify that your use is permitted as per
+                                the source's license.
+                            </p>
+                            <p>{this.renderSources()}</p>
                             <h4 className="grapher_h4-semibold">
                                 Download options
                             </h4>
+
                             <div className="grouped-menu-list">
                                 <button
                                     title="Full data (CSV)"
@@ -453,13 +469,17 @@ df = pd.read_csv("${csvUrl}")`
                                     </div>
                                 </button>
                             </div>
-                            <h4>Source</h4>
-                            <p>{this.renderSources()}</p>
                             <h4>Download</h4>
                             <div className="grouped-menu-list">
                                 <DownloadButton
-                                    title="Data as CSV"
-                                    description="Download the data in CSV format."
+                                    title="Data and metadata as a ZIP file"
+                                    description="Download the data csv, metadata json and a readme as a ZIP file."
+                                    onClick={this.onCsvDownload}
+                                    tracking="chart_download_csv"
+                                />
+                                <DownloadButton
+                                    title="Data only (CSV)"
+                                    description="Download only the data in CSV format."
                                     onClick={this.onCsvDownload}
                                     tracking="chart_download_csv"
                                 />