From 565d485e816dcb21bfd8df5f48113f311dc43818 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Mon, 16 Oct 2023 11:54:09 +0000
Subject: [PATCH] fix(grapher): fix chart icon on first load for line charts

---
 .../grapher/src/controls/ContentSwitchers.tsx | 25 +++++++++++++------
 .../grapher/src/core/Grapher.tsx              | 10 ++++++++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
index fc48ef588fb..41ca8260182 100644
--- a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
@@ -13,6 +13,7 @@ export interface ContentSwitchersManager {
     isNarrow?: boolean
     type?: ChartTypeName
     isLineChartThatTurnedIntoDiscreteBar?: boolean
+    isAuthoredAsLineChartThatTurnedIntoDiscreteBar?: boolean
 }
 
 @observer
@@ -45,20 +46,28 @@ export class ContentSwitchers extends React.Component<{
             case GrapherTabOption.map:
                 return <FontAwesomeIcon icon={faEarthAmericas} />
             case GrapherTabOption.chart:
-                const chartIcon = manager.isLineChartThatTurnedIntoDiscreteBar
+                let chartIcon = manager.isLineChartThatTurnedIntoDiscreteBar
                     ? chartIcons[ChartTypeName.DiscreteBar]
                     : chartIcons[this.chartType]
                 // If we're switching from a line chart to the map, then the timeline
                 // is automatically set to a single year, and the underlying chart switches to
                 // a discrete bar chart, which makes the line chart icon change into a bar chart icon.
                 // To prevent that, we hold onto the previous chart icon if we're not currently on the chart tab.
-                const newChartIcon =
-                    this.previousChartIcon &&
-                    manager.tab !== GrapherTabOption.chart
-                        ? this.previousChartIcon
-                        : chartIcon
-                this.previousChartIcon = newChartIcon
-                return newChartIcon
+                if (manager.tab !== GrapherTabOption.chart) {
+                    // make sure we're showing the line chart icon on first load
+                    // if the chart is configured to be a line chart initially
+                    if (
+                        !this.previousChartIcon &&
+                        this.chartType === ChartTypeName.LineChart &&
+                        !manager.isAuthoredAsLineChartThatTurnedIntoDiscreteBar
+                    ) {
+                        chartIcon = chartIcons[ChartTypeName.LineChart]
+                    } else if (this.previousChartIcon) {
+                        chartIcon = this.previousChartIcon
+                    }
+                }
+                this.previousChartIcon = chartIcon
+                return chartIcon
         }
     }
 
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 98e8cf46123..7c7a6918e82 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -2676,6 +2676,16 @@ export class Grapher
         })
     }
 
+    @computed
+    get isAuthoredAsLineChartThatTurnedIntoDiscreteBar(): boolean {
+        const {
+            type = ChartTypeName.LineChart,
+            minTime,
+            maxTime,
+        } = this.legacyConfigAsAuthored
+        return type === ChartTypeName.LineChart && minTime === maxTime
+    }
+
     @computed get queryStr(): string {
         return queryParamsToStr(this.changedParams)
     }