From 47b21ed2af3c9829c41ddaf8c5f050178150a8b7 Mon Sep 17 00:00:00 2001
From: tonypls <tonyvanswet@gmail.com>
Date: Wed, 8 Jan 2025 18:12:05 +1300
Subject: [PATCH 1/3] feat(web): link data portal from app

---
 web/src/components/buttons/DownloadCsv.tsx  | 36 +++++++++++++++++++++
 web/src/features/panels/zone/ZoneHeader.tsx |  2 ++
 2 files changed, 38 insertions(+)
 create mode 100644 web/src/components/buttons/DownloadCsv.tsx

diff --git a/web/src/components/buttons/DownloadCsv.tsx b/web/src/components/buttons/DownloadCsv.tsx
new file mode 100644
index 0000000000..af1be77d18
--- /dev/null
+++ b/web/src/components/buttons/DownloadCsv.tsx
@@ -0,0 +1,36 @@
+import { Button } from 'components/Button';
+import { Download } from 'lucide-react';
+import { useParams } from 'react-router-dom';
+import { DEFAULT_ICON_SIZE } from 'utils/constants';
+
+import { getCountryName, getZoneName } from '../../translation/translation';
+
+function getCountryToDownload(zoneId?: string) {
+  if (!zoneId) {
+    return '';
+  }
+
+  const zoneName = getZoneName(zoneId);
+  const zoneCountryName =
+    zoneId && zoneId.includes('-') && getCountryName(zoneId)?.toLowerCase();
+  return zoneCountryName || zoneName;
+}
+
+export function DownloadCsv() {
+  const { zoneId } = useParams();
+  const countryToDownload = getCountryToDownload(zoneId);
+
+  const url = `https://www.electricitymaps.com/data-portal/${countryToDownload.toLowerCase()}?utm_source=app&utm_medium=download_button&utm_campaign=csv_download`;
+
+  return (
+    <Button
+      href={url}
+      icon={<Download size={DEFAULT_ICON_SIZE} />}
+      type="tertiary"
+      size="md"
+      aria-label="Download CSV Data"
+    />
+  );
+}
+
+export default DownloadCsv;
diff --git a/web/src/features/panels/zone/ZoneHeader.tsx b/web/src/features/panels/zone/ZoneHeader.tsx
index 108f255b57..5752766d0f 100644
--- a/web/src/features/panels/zone/ZoneHeader.tsx
+++ b/web/src/features/panels/zone/ZoneHeader.tsx
@@ -1,3 +1,4 @@
+import { DownloadCsv } from 'components/buttons/DownloadCsv';
 import { MoreOptionsDropdown, useShowMoreOptions } from 'components/MoreOptionsDropdown';
 import { TimeDisplay } from 'components/TimeDisplay';
 import { useFeatureFlag } from 'features/feature-flags/api';
@@ -45,6 +46,7 @@ export default function ZoneHeader({ zoneId, isEstimated }: ZoneHeaderTitleProps
         <ZoneHeaderTitle zoneId={zoneId} zoneNameFull={zoneNameFull} />
         <TimeDisplay className="whitespace-nowrap text-sm" />
       </div>
+      <DownloadCsv />
       {isShareButtonEnabled &&
         isConsumption &&
         (showMoreOptions ? (

From c163023e1d9342034b86036d1824d98822949686 Mon Sep 17 00:00:00 2001
From: tonypls <tonyvanswet@gmail.com>
Date: Tue, 28 Jan 2025 14:04:52 +1300
Subject: [PATCH 2/3] link to new datasets and memo

---
 web/src/components/buttons/DownloadCsv.tsx | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/web/src/components/buttons/DownloadCsv.tsx b/web/src/components/buttons/DownloadCsv.tsx
index af1be77d18..c8b89d489f 100644
--- a/web/src/components/buttons/DownloadCsv.tsx
+++ b/web/src/components/buttons/DownloadCsv.tsx
@@ -1,26 +1,13 @@
 import { Button } from 'components/Button';
 import { Download } from 'lucide-react';
+import { memo } from 'react';
 import { useParams } from 'react-router-dom';
 import { DEFAULT_ICON_SIZE } from 'utils/constants';
 
-import { getCountryName, getZoneName } from '../../translation/translation';
-
-function getCountryToDownload(zoneId?: string) {
-  if (!zoneId) {
-    return '';
-  }
-
-  const zoneName = getZoneName(zoneId);
-  const zoneCountryName =
-    zoneId && zoneId.includes('-') && getCountryName(zoneId)?.toLowerCase();
-  return zoneCountryName || zoneName;
-}
-
-export function DownloadCsv() {
+function DownloadCsv() {
   const { zoneId } = useParams();
-  const countryToDownload = getCountryToDownload(zoneId);
 
-  const url = `https://www.electricitymaps.com/data-portal/${countryToDownload.toLowerCase()}?utm_source=app&utm_medium=download_button&utm_campaign=csv_download`;
+  const url = `https://portal.electricitymaps.com/datasets/${zoneId}?utm_source=app&utm_medium=download_button&utm_campaign=csv_download`;
 
   return (
     <Button
@@ -33,4 +20,4 @@ export function DownloadCsv() {
   );
 }
 
-export default DownloadCsv;
+export default memo(DownloadCsv);

From 90a5637b7f4f8673abf38829aa5c53a90545a402 Mon Sep 17 00:00:00 2001
From: tonypls <tonyvanswet@gmail.com>
Date: Tue, 28 Jan 2025 14:07:27 +1300
Subject: [PATCH 3/3] correct import

---
 web/src/features/panels/zone/ZoneHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/features/panels/zone/ZoneHeader.tsx b/web/src/features/panels/zone/ZoneHeader.tsx
index 6b0f3c81f9..7f49cb7389 100644
--- a/web/src/features/panels/zone/ZoneHeader.tsx
+++ b/web/src/features/panels/zone/ZoneHeader.tsx
@@ -1,4 +1,4 @@
-import { DownloadCsv } from 'components/buttons/DownloadCsv';
+import DownloadCsv from 'components/buttons/DownloadCsv';
 import { MoreOptionsDropdown, useShowMoreOptions } from 'components/MoreOptionsDropdown';
 import { TimeDisplay } from 'components/TimeDisplay';
 import { useFeatureFlag } from 'features/feature-flags/api';