From 1058a783485de8a99568fc46aa8cd148cd7c0b28 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 9 Jan 2025 13:27:18 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20deduplicate=20sources=20tab=20by=20?=
 =?UTF-8?q?label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/modal/SourcesModal.tsx        | 65 +++++++++++++------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
index d3f2d1aeda..d31b58c7df 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -15,6 +15,7 @@ import {
     joinTitleFragments,
     getCitationShort,
     getCitationLong,
+    uniqBy,
 } from "@ourworldindata/utils"
 import {
     IndicatorSources,
@@ -113,27 +114,51 @@ export class SourcesModal extends React.Component<
         return this.manager.columnsWithSourcesExtensive
     }
 
+    private makeTabLabelElement(
+        title: string,
+        attribution?: string
+    ): React.ReactElement {
+        return (
+            <>
+                {title}
+                {attribution && (
+                    <span className="attribution">{attribution}</span>
+                )}
+            </>
+        )
+    }
+
+    @computed private get tabs(): {
+        column: CoreColumn
+        label: { element: React.ReactElement }
+    }[] {
+        const tabs = uniqBy(
+            this.columns.map((column) => {
+                const title = column.titlePublicOrDisplayName.title
+                const attribution = joinTitleFragments(
+                    column.titlePublicOrDisplayName.attributionShort,
+                    column.titlePublicOrDisplayName.titleVariant
+                )
+                return { column, title, attribution }
+            }),
+            // deduplicate tabs by their label
+            (tab) => `${tab.title} ${tab.attribution}`
+        )
+
+        return tabs.map((tab) => ({
+            column: tab.column,
+            label: {
+                element: this.makeTabLabelElement(tab.title, tab.attribution),
+            },
+        }))
+    }
+
     @computed private get tabLabels(): TabLabel[] {
-        return this.columns.map((column) => {
-            const attribution = joinTitleFragments(
-                column.titlePublicOrDisplayName.attributionShort,
-                column.titlePublicOrDisplayName.titleVariant
-            )
-            return {
-                element: (
-                    <React.Fragment key={column.slug}>
-                        {column.titlePublicOrDisplayName.title}
-                        {attribution && (
-                            <span className="attribution">{attribution}</span>
-                        )}
-                    </React.Fragment>
-                ),
-            }
-        })
+        return this.tabs.map(({ label }) => label)
     }
 
     @computed private get tabLabelWidths(): number[] {
-        return this.columns.map((column) => {
+        return this.tabs.map(({ column }) => {
             const title = `${column.titlePublicOrDisplayName.title}`
             const fragments = joinTitleFragments(
                 column.titlePublicOrDisplayName.attributionShort,
@@ -265,14 +290,14 @@ export class SourcesModal extends React.Component<
                     indicator for more information.
                 </p>
                 {this.renderTabs()}
-                {this.renderSource(this.columns[this.state.activeTabIndex])}
+                {this.renderSource(this.tabs[this.state.activeTabIndex].column)}
             </>
         )
     }
 
     private renderModalContent(): React.ReactElement | null {
-        return this.columns.length === 1
-            ? this.renderSource(this.columns[0])
+        return this.tabs.length === 1
+            ? this.renderSource(this.tabs[0].column)
             : this.renderMultipleSources()
     }