Show only important sources in summaries (#2798)

This PR introduces two different ways to iterate over the sources of a chart - a `columnsWithSourcesExtensive` and `columnsWithSourcesCondensed`. When rendering the sources at the bottom of the chart we want to only show the most relevant ones (i.e. hide stuff like population used for sizing a scatter) - for this we use the `Condensed` version. When showing the sources tab we use the Extensive so that all our sources are rendered there.

This is related to #2755 and fixes these points:
* [x] Following [Ed's suggested](https://owid.slack.com/archives/C0193RW5E2J/p1695720931545929?thread_ts=1695717004.876169&cid=C0193RW5E2J) (it seems we already decided about it at some other time in the past) scatter plots should not show population in the footer of the chart, but they should show population in the sources tab (in "Data published by").

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

@@ -1446,24 +1446,48 @@ export class Grapher
         ])
     }
 
-    @computed get columnsWithSources(): CoreColumn[] {
+    @computed get columnsWithSourcesExtensive(): CoreColumn[] {
         const { yColumnSlugs, xColumnSlug, sizeColumnSlug, colorColumnSlug } =
             this
 
+        const columnSlugs = excludeUndefined([
+            ...yColumnSlugs,
+            xColumnSlug,
+            sizeColumnSlug,
+            colorColumnSlug,
+        ])
+
+        return this.inputTable
+            .getColumns(uniq(columnSlugs))
+            .filter(
+                (column) => !!column.source.name || !isEmpty(column.def.origins)
+            )
+    }
+
+    getColumnSlugsForCondensedSources(): string[] {
+        const { xColumnSlug, sizeColumnSlug, colorColumnSlug, isMarimekko } =
+            this
+        const columnSlugs: string[] = []
+
         // "Countries Continent"
         const isContinentsVariableId = (id: string): boolean => id === "123"
 
+        // exclude "Countries Continent" if it's used as the color dimension in a scatter plot, slope chart etc.
+        if (
+            colorColumnSlug !== undefined &&
+            !isContinentsVariableId(colorColumnSlug)
+        )
+            columnSlugs.push(colorColumnSlug)
+
         const isPopulationVariableId = (id: string): boolean =>
             id === "525709" || // "Population (historical + projections), Gapminder, HYDE & UN"
             id === "525711" || // "Population (historical estimates), Gapminder, HYDE & UN"
             id === "597929" || // "Population (various sources, 2023.1)"
             id === "597930" // "Population (various sources, 2023.1)"
 
-        const columnSlugs = [...yColumnSlugs]
-
         if (xColumnSlug !== undefined) {
             // exclude population variable if it's used as the x dimension in a marimekko
-            if (!isPopulationVariableId(xColumnSlug) || !this.isMarimekko)
+            if (!isMarimekko || !isPopulationVariableId(xColumnSlug))
                 columnSlugs.push(xColumnSlug)
         }
 
@@ -1473,13 +1497,14 @@ export class Grapher
             !isPopulationVariableId(sizeColumnSlug)
         )
             columnSlugs.push(sizeColumnSlug)
+        return columnSlugs
+    }
 
-        // exclude "Countries Continent" if it's used as the color dimension in a scatter plot, slope chart etc.
-        if (
-            colorColumnSlug !== undefined &&
-            !isContinentsVariableId(colorColumnSlug)
-        )
-            columnSlugs.push(colorColumnSlug)
+    @computed get columnsWithSourcesCondensed(): CoreColumn[] {
+        const { yColumnSlugs } = this
+
+        const columnSlugs = [...yColumnSlugs]
+        columnSlugs.push(...this.getColumnSlugsForCondensedSources())
 
         return this.inputTable
             .getColumns(uniq(columnSlugs))
@@ -1489,22 +1514,24 @@ export class Grapher
     }
 
     @computed private get defaultSourcesLine(): string {
-        const attributions = this.columnsWithSources.flatMap((column) => {
-            // if the variable metadata specifies an attribution on the
-            // variable level then this is preferred over assembling it from
-            // the source and origins
-            if (
-                column.def.attribution !== undefined &&
-                column.def.attribution !== ""
-            )
-                return [column.def.attribution]
-            else {
-                const originFragments = getOriginAttributionFragments(
-                    column.def.origins
+        const attributions = this.columnsWithSourcesCondensed.flatMap(
+            (column) => {
+                // if the variable metadata specifies an attribution on the
+                // variable level then this is preferred over assembling it from
+                // the source and origins
+                if (
+                    column.def.attribution !== undefined &&
+                    column.def.attribution !== ""
                 )
-                return [column.source.name, ...originFragments]
+                    return [column.def.attribution]
+                else {
+                    const originFragments = getOriginAttributionFragments(
+                        column.def.origins
+                    )
+                    return [column.source.name, ...originFragments]
+                }
             }
-        })
+        )
 
         const uniqueAttributions = uniq(compact(attributions))
 

packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx

@@ -9,9 +9,11 @@ export default {
 
 export const WithSources = (): JSX.Element => (
     <SourcesModal
-        manager={{ columnsWithSources: SynthesizeGDPTable().columnsAsArray }}
+        manager={{
+            columnsWithSourcesExtensive: SynthesizeGDPTable().columnsAsArray,
+        }}
     />
 )
 export const NoSources = (): JSX.Element => (
-    <SourcesModal manager={{ columnsWithSources: [] }} />
+    <SourcesModal manager={{ columnsWithSourcesExtensive: [] }} />
 )

packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx

@@ -16,7 +16,7 @@ import { Modal } from "./Modal"
 
 export interface SourcesModalManager {
     adminBaseUrl?: string
-    columnsWithSources: CoreColumn[]
+    columnsWithSourcesExtensive: CoreColumn[]
     showAdminControls?: boolean
     isSourcesModalOpen?: boolean
     tabBounds?: Bounds
@@ -268,7 +268,7 @@ export class SourcesModal extends React.Component<{
     }
 
     render(): JSX.Element {
-        const cols = this.manager.columnsWithSources
+        const cols = this.manager.columnsWithSourcesExtensive
         return (
             <Modal
                 title="Sources"