fix(grapher): display line/bar chart icon depending on whether it's c…

packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx

@@ -35,8 +35,6 @@ export class ContentSwitchers extends React.Component<{
         return this.manager.type ?? ChartTypeName.LineChart
     }
 
-    private previousChartIcon: JSX.Element | undefined
-
     private tabIcon(tab: GrapherTabOption): JSX.Element {
         const { manager } = this
         switch (tab) {
@@ -48,17 +46,7 @@ export class ContentSwitchers extends React.Component<{
                 const 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
+                return chartIcon
         }
     }
 

packages/@ourworldindata/grapher/src/core/Grapher.tsx

@@ -1594,7 +1594,19 @@ export class Grapher
     }
 
     @computed get isLineChartThatTurnedIntoDiscreteBar(): boolean {
-        return this.isLineChart && this.areHandlesOnSameTime
+        if (!this.isLineChart) return false
+
+        // This is the easy case: minTime and maxTime are the same, no need to do
+        // more fancy checks
+        if (this.minTime === this.maxTime) return true
+
+        // We can have cases where minTime = Infinity and/or maxTime = -Infinity,
+        // but still only a single year is selected.
+        // To check for that we need to look at the times array.
+        const times = this.tableAfterAuthorTimelineFilter.timeColumn.uniqValues
+        const minTime = findClosestTime(times, this.minTime ?? -Infinity)
+        const maxTime = findClosestTime(times, this.maxTime ?? Infinity)
+        return minTime !== undefined && minTime === maxTime
     }
 
     @computed get supportsMultipleYColumns(): boolean {