+
)}
- {lastUpdated && (
-
-
Last updated
-
{lastUpdated}
-
- )}
- {nextUpdate && (
-
-
Next expected update
-
{nextUpdate}
-
- )}
- {dateRange && (
-
-
Date range
-
{dateRange}
-
- )}
- {unit && (
-
- )}
- {unitConversionFactor && (
-
-
- Unit conversion factor
+ {rows.map(([first, second]) => (
+
+
+
{first.label}
+
{first.content}
- {unitConversionFactor}
-
-
- )}
- {links && (
-
- )}
+ {second && (
+
+
+ {second.label}
+
+
+ {second.content}
+
+
+ )}
+
+ ))}
)
}
-
-const count = (...args: any[]) => args.filter((arg) => arg).length
-const isEven = (n: number) => n % 2 === 0
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
index e745c61c3eb..867d59cd552 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -1,13 +1,15 @@
.SourcesModalContent {
// keep in sync with variables in SourcesModal.tsx
- $max-width: 832px;
+ $max-content-width: 640px;
+ $tab-padding: 16px;
+ $tab-font-size: 13px;
+ $tab-gap: 8px;
padding-bottom: $modal-padding;
- max-width: $max-width;
+ max-width: $max-content-width;
margin: 0 auto;
$border: #e7e7e7;
- $box-title: #a1a1a1;
.note-multiple-indicators {
margin-top: 0;
@@ -18,12 +20,13 @@
}
.source {
- color: $dark-text;
+ color: $light-text;
h2 {
@include h1-semibold;
margin-top: 0;
margin-bottom: 8px;
+ color: $dark-text;
@include sm-up {
font-size: 1.5rem;
@@ -34,6 +37,7 @@
@include body-3-medium;
margin-top: 8px;
margin-bottom: 16px;
+ color: $dark-text;
}
a {
@@ -47,16 +51,32 @@
.heading {
@include h2-semibold;
margin-top: 32px;
- margin-bottom: 8px;
+ margin-bottom: 16px;
+ color: $dark-text;
+
+ &--tight {
+ margin-bottom: 8px;
+ }
}
.indicator-sources {
- .ExpandableToggle:first-of-type {
+ --indicator-sources-description-heading: #{$dark-text};
+ --indicator-sources-key-data-title: #{$dark-text};
+ --indicator-sources-content: #{$light-text};
+
+ .ExpandableToggle:first-of-type,
+ .NonExpandable:first-of-type {
border-top: none;
+ padding-top: 0;
+
+ .ExpandableToggle__button {
+ padding-top: 0;
+ }
}
- .source-key-data {
- --source-key-data-title: #{$dark-text};
+ &--single .NonExpandable {
+ border: none;
+ padding: 0;
}
}
@@ -69,8 +89,8 @@
.indicator-processing-callout {
--indicator-processing-background: #{$gray-10};
- --indicator-processing-title: #{$box-title};
- --indicator-processing-content: #{$dark-text};
+ --indicator-processing-title: #{$dark-text};
+ --indicator-processing-content: #{$light-text};
margin-left: 0;
margin-right: 0;
@@ -79,14 +99,13 @@
.ExpandableToggle {
--expandable-toggle-border: #{$border};
--expandable-toggle-title: #{$dark-text};
+ --expandable-toggle-content: #{$light-text};
--expandable-toggle-button: #{$dark-text};
--expandable-toggle-button-hover: #{$light-text};
- --expandable-toggle-content: #{$light-text};
}
.NonExpandable {
--non-expandable-title: #{$dark-text};
- --non-expandable-content: #{$light-text};
--non-expandable-border: #{$border};
}
@@ -99,12 +118,10 @@
--code-snippet-button-active: #{$light-text};
}
- // keep in sync with measureTabWidth() in SourcesModal.tsx
.Tabs__tab {
- font-size: 13px;
- padding: 8px 16px;
- margin-right: 8px;
- max-width: 240px;
+ font-size: $tab-font-size;
+ padding: 8px $tab-padding;
+ margin-right: $tab-gap;
}
.indicator-processing .indicator-processing__link {
@@ -113,7 +130,7 @@
height: auto;
padding: 0;
text-align: left;
- color: inherit;
+ color: $dark-text;
background-color: transparent;
text-decoration: underline;
text-underline-offset: 4px;
@@ -123,8 +140,8 @@
}
svg {
- display: inline-block;
- transform: rotate(-90deg);
+ //display: inline-block;
+ //transform: rotate(-90deg);
}
}
}
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
index 3672a89feae..0842bb51a40 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -2,6 +2,7 @@ import {
Bounds,
DEFAULT_BOUNDS,
uniq,
+ uniqBy,
sum,
zip,
getAttributionFragmentsFromVariable,
@@ -13,8 +14,6 @@ import {
OwidSource,
} from "@ourworldindata/utils"
import {
- Tabs,
- ExpandableTabs,
IndicatorSources,
IndicatorProcessing,
} from "@ourworldindata/components"
@@ -26,12 +25,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
import { CoreColumn, OwidColumnDef } from "@ourworldindata/core-table"
import { Modal } from "./Modal"
import { SourcesKeyDataTable } from "./SourcesKeyDataTable"
-import { SourcesDescriptions } from "./SourcesDescriptions.js"
+import { SourcesDescriptions } from "./SourcesDescriptions"
+import { Tabs } from "../tabs/Tabs"
+import { ExpandableTabs } from "../tabs/ExpandableTabs"
+import { LoadingIndicator } from "../loadingIndicator/LoadingIndicator"
// keep in sync with variables in SourcesModal.scss
-const MAX_WIDTH = 832
+const MAX_CONTENT_WIDTH = 640
+const TAB_PADDING = 16
+const TAB_FONT_SIZE = 13
+const TAB_GAP = 8
export interface SourcesModalManager {
+ isReady?: boolean
adminBaseUrl?: string
columnsWithSourcesExtensive: CoreColumn[]
showAdminControls?: boolean
@@ -71,8 +77,20 @@ export class SourcesModal extends React.Component<
}
@computed private get modalBounds(): Bounds {
+ const maxWidth = MAX_CONTENT_WIDTH + 220
// using 15px instead of 16px to make sure the modal fully covers the OWID logo in the header
- return this.tabBounds.pad(15)
+ const padWidth = Math.max(15, (this.tabBounds.width - maxWidth) / 2)
+ return this.tabBounds.padHeight(15).padWidth(padWidth)
+ }
+
+ @computed private get showStickyModalHeader(): boolean {
+ const modalWidth = this.modalBounds.width - 2 * this.modalPadding
+ const dismissButtonWidth = 32
+ return (modalWidth - MAX_CONTENT_WIDTH) / 2 < dismissButtonWidth
+ }
+
+ @computed private get modalPadding(): number {
+ return 1.5 * (this.manager.fontSize ?? 16)
}
@computed private get editBaseUrl(): string | undefined {
@@ -84,6 +102,19 @@ export class SourcesModal extends React.Component<
return this.manager.columnsWithSourcesExtensive
}
+ @computed private get deduplicatedColumn(): CoreColumn | undefined {
+ const sources = this.columns.map((column) => new Source({ column }))
+
+ // no need to deduplicate if there is only one source
+ if (sources.length <= 1) return undefined
+
+ // deduplicate on all visible information
+ const uniqueSources = uniqBy(sources, (source) =>
+ visibleSourceInformation(source)
+ )
+ return uniqueSources.length === 1 ? this.columns[0] : undefined
+ }
+
@computed private get tabLabels(): string[] {
return this.columns.map((column) => column.nonEmptyDisplayName)
}
@@ -101,6 +132,19 @@ export class SourcesModal extends React.Component<
)
}
+ private renderDeduplicatedSource(): JSX.Element | null {
+ if (!this.deduplicatedColumn) return null
+ return (
+
+ )
+ }
+
private renderTabs(): JSX.Element {
const activeIndex = this.state.activeTabIndex
const setActiveIndex = (index: number) =>
@@ -108,38 +152,61 @@ export class SourcesModal extends React.Component<
activeTabIndex: index,
})
- if (this.manager.isNarrow)
+ // tabs are clipped to this width
+ const maxTabWidth = 240
+
+ // on mobile, we show a horizontally scrolling tabs
+ if (this.manager.isNarrow) {
return (
)
+ }
- // width available for tabs
- const modalPadding = 1.5 * (this.manager.fontSize ?? 16)
+ // maximum width available for tabs
const maxWidth = Math.min(
- MAX_WIDTH,
- this.modalBounds.width - 2 * modalPadding - 10 // wiggle room
+ MAX_CONTENT_WIDTH,
+ this.modalBounds.width - 2 * this.modalPadding - 10 // wiggle room
)
const labelWidths = this.tabLabels.map(
- (label) => measureTabWidth(label) + 8 // right padding
+ (label) => measureTabWidth(label) + TAB_GAP
+ )
+
+ // check if all tab labels fit into a single line
+ if (sum(labelWidths) <= maxWidth) {
+ return (
+
+ )
+ }
+
+ const clippedLabelWidths = this.tabLabels.map(
+ (label) => Math.min(measureTabWidth(label), maxTabWidth) + TAB_GAP
)
- // check if all tabs fit into a single line
- if (sum(labelWidths) <= maxWidth)
+ // check if all tab labels fit into a single line when they are clipped
+ if (sum(clippedLabelWidths) <= maxWidth) {
return (
)
+ }
- // get a subset of tabs that fit into a single line
+ // compute the subset of tabs that fit into a single line
const getVisibleLabels = (labels: string[]) => {
// take width of the "Show more" button into account
let width =
@@ -148,7 +215,7 @@ export class SourcesModal extends React.Component<
6 // icon padding
const visibleLabels: string[] = []
- for (const [label, labelWidth] of zip(labels, labelWidths)) {
+ for (const [label, labelWidth] of zip(labels, clippedLabelWidths)) {
width += labelWidth as number
if (width > maxWidth) break
visibleLabels.push(label as string)
@@ -159,15 +226,17 @@ export class SourcesModal extends React.Component<
// if only a single label would be visible, we prefer tabs with horizontal scrolling
const visibleLabels = getVisibleLabels(this.tabLabels)
- if (visibleLabels.length <= 1)
+ if (visibleLabels.length <= 1) {
return (
)
+ }
return (
)
}
+ private renderMultipleSources(): JSX.Element {
+ return (
+ <>
+
+ This chart is composed of multiple indicators. Select an
+ indicator for more information.
+
+ {this.renderTabs()}
+ {this.renderSource(this.columns[this.state.activeTabIndex])}
+
+ )
+ }
+
+ private renderModalContent(): JSX.Element | null {
+ if (this.deduplicatedColumn) {
+ return this.renderDeduplicatedSource()
+ }
+
+ return this.columns.length === 1
+ ? this.renderSource(this.columns[0])
+ : this.renderMultipleSources()
+ }
+
render(): JSX.Element {
return (
(this.manager.isSourcesModalOpen = false)
)}
bounds={this.modalBounds}
+ isHeightFixed={true}
+ showStickyHeader={this.showStickyModalHeader}
>
- {this.columns.length === 1 ? (
- this.renderSource(this.columns[0])
+ {this.manager.isReady ? (
+ this.renderModalContent()
) : (
- <>
-
- This data includes several indicators. Select an
- indicator for more information.
-
- {this.renderTabs()}
- {this.renderSource(
- this.columns[this.state.activeTabIndex]
- )}
-
+
)}
@@ -214,16 +300,20 @@ export class Source extends React.Component<{
editBaseUrl?: string
isEmbeddedInADataPage?: boolean
}> {
- @computed private get def(): OwidColumnDef {
- return this.props.column.def
+ @computed get column(): CoreColumn {
+ return this.props.column
+ }
+
+ @computed get def(): OwidColumnDef & { source?: OwidSource } {
+ return { ...this.column.def, source: this.column.source }
}
@computed private get source(): OwidSource {
- return this.props.column.source ?? {}
+ return this.def.source ?? {}
}
@computed private get title(): string {
- return this.props.column.nonEmptyDisplayName
+ return this.column.nonEmptyDisplayName
}
@computed private get editUrl(): string | undefined {
@@ -237,23 +327,23 @@ export class Source extends React.Component<{
return uniq(excludeUndefined(this.def.origins.map((o) => o.producer)))
}
- @computed private get attributions(): string | undefined {
+ @computed get attributions(): string | undefined {
const attributionFragments =
getAttributionFragmentsFromVariable(this.def) ?? this.producers
if (attributionFragments.length === 0) return undefined
return attributionFragments.join(", ")
}
- @computed private get lastUpdated(): string | undefined {
+ @computed get lastUpdated(): string | undefined {
return getLastUpdatedFromVariable(this.def)
}
- @computed private get nextUpdate(): string | undefined {
+ @computed get nextUpdate(): string | undefined {
return getNextUpdateFromVariable(this.def)
}
- @computed private get unit(): string | undefined {
- return this.def.display?.unit ?? this.def.unit
+ @computed get unit(): string | undefined {
+ return this.column.unit
}
@computed private get datapageHasFAQSection(): boolean {
@@ -273,17 +363,35 @@ export class Source extends React.Component<{
return prepareSourcesForDisplay(this.def)
}
+ @computed protected get sourcesSectionHeading(): string {
+ return "The data of this indicator is based on the following sources:"
+ }
+
+ @computed private get hideSourcesForDisplay(): boolean {
+ // the indictaor with id = 123 is the "Continent" variable curated by OWID.
+ // it's used in many charts but doesn't come with useful source information.
+ // that's why we hide the sources section for this indicator for now,
+ // but we might decide to show it in the future
+ return this.def.owidVariableId === 123
+ }
+
+ protected renderTitle(): JSX.Element {
+ return (
+
+ {this.title}{" "}
+ {this.editUrl && (
+
+
+
+ )}
+
+ )
+ }
+
render(): JSX.Element {
return (
-
- {this.title}{" "}
- {this.editUrl && (
-
-
-
- )}
-
+ {this.renderTitle()}
{this.def.descriptionShort && (
{this.def.descriptionShort}
)}
@@ -295,16 +403,8 @@ export class Source extends React.Component<{
nextUpdate={this.nextUpdate}
unit={this.unit}
link={this.source.link}
- unitConversionFactor={
- this.props.column.unitConversionFactor
- }
+ unitConversionFactor={this.column.unitConversionFactor}
isEmbeddedInADataPage={this.props.isEmbeddedInADataPage}
- hideTopBorder={!this.def.descriptionShort}
- hideBottomBorder={
- this.showDescriptions &&
- (!this.def.descriptionKey ||
- this.def.descriptionKey.length === 0)
- }
/>
{this.showDescriptions && (
)}
- {this.sourcesForDisplay &&
+ {!this.hideSourcesForDisplay &&
+ this.sourcesForDisplay &&
this.sourcesForDisplay.length > 0 && (
<>
- This data is based on the following sources:
+ {this.sourcesSectionHeading}
)}
-
+
How we process data at Our World in Data:
About this data
+ }
+
+ @computed get sourcesSectionHeading(): string {
+ return "This data is based on the following sources"
+ }
+}
+
+const visibleSourceInformation = (source: Source): string => {
+ return [
+ // used in key data table
+ source.attributions,
+ source.def.timespan,
+ source.lastUpdated,
+ source.nextUpdate,
+ source.unit,
+ source.def.sourceLink,
+ source.column.unitConversionFactor,
+
+ // descriptions
+ source.def.descriptionShort,
+ source.def.descriptionKey,
+ source.def.descriptionFromProducer,
+ source.def.additionalInfo,
+
+ // old source information
+ source.def.sourceName,
+ source.def.dataPublishedBy,
+ source.def.retrievedDate,
+ source.def.description,
+
+ // origins
+ source.def.origins
+ ?.map((origin) => [
+ origin.producer,
+ origin.title,
+ origin.description,
+ origin.dateAccessed,
+ origin.urlMain,
+ origin.citationFull,
+ ])
+ .join("-"),
+ ].join("-")
+}
+
const measureTabWidth = (label: string): number => {
- const maxWidth = 240
- const computedWidth =
- 2 * 16 + // padding
- Bounds.forText(label, { fontSize: 13 }).width +
+ return (
+ 2 * TAB_PADDING +
+ Bounds.forText(label, { fontSize: TAB_FONT_SIZE }).width +
2 // border
- return Math.min(maxWidth, computedWidth)
+ )
}
diff --git a/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss
new file mode 100644
index 00000000000..5bd9f9d9097
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss
@@ -0,0 +1,17 @@
+.ExpandableTabs:not(.ExpandableTabs--expanded) {
+ white-space: nowrap;
+}
+
+.ExpandableTabs__button {
+ color: $dark-text;
+ border-color: #f2f2f2;
+ background: #f2f2f2;
+
+ &:hover {
+ background: #e7e7e7;
+ }
+
+ svg {
+ margin-right: 6px;
+ }
+}
diff --git a/packages/@ourworldindata/components/src/Tabs/ExpandableTabs.tsx b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.tsx
similarity index 67%
rename from packages/@ourworldindata/components/src/Tabs/ExpandableTabs.tsx
rename to packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.tsx
index e4772bb1f24..fefc229c848 100644
--- a/packages/@ourworldindata/components/src/Tabs/ExpandableTabs.tsx
+++ b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.tsx
@@ -1,6 +1,7 @@
import React, { useState } from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons"
+import cx from "classnames"
import { Tabs } from "./Tabs"
export const ExpandableTabs = ({
@@ -9,12 +10,14 @@ export const ExpandableTabs = ({
setActiveIndex,
isExpandedDefault = false,
getVisibleLabels = (labels: string[]) => labels.slice(0, 3),
+ maxTabWidth = 240,
}: {
labels: string[]
activeIndex: number
setActiveIndex: (index: number) => void
isExpandedDefault?: boolean
getVisibleLabels?: (tabLabels: string[]) => string[]
+ maxTabWidth?: number | null // if null, don't clip labels
}) => {
const [isExpanded, setExpanded] = useState(isExpandedDefault)
@@ -32,11 +35,18 @@ export const ExpandableTabs = ({
)
return (
-
+
+
+
)
}
diff --git a/packages/@ourworldindata/grapher/src/tabs/Tabs.scss b/packages/@ourworldindata/grapher/src/tabs/Tabs.scss
new file mode 100644
index 00000000000..a97ffa470a7
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/tabs/Tabs.scss
@@ -0,0 +1,38 @@
+.Tabs {
+ margin: 16px 0;
+
+ &--horizontal-scroll {
+ overflow-x: auto;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: none;
+ }
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ &__tab {
+ margin: 0 8px 8px 0;
+ padding: 8px 16px;
+ border: 1px solid $blue-10;
+ background: #fff;
+ color: $light-text;
+ font-size: 0.8125rem;
+ font-weight: 500;
+ letter-spacing: 0.01em;
+ white-space: nowrap;
+
+ &:hover {
+ cursor: pointer;
+ background-color: $gray-10;
+ border-color: $gray-10;
+ }
+
+ &[aria-selected="true"] {
+ background: $accent-pale-blue;
+ border-color: $accent-pale-blue;
+ color: $blue-90;
+ }
+ }
+}
diff --git a/packages/@ourworldindata/components/src/Tabs/Tabs.tsx b/packages/@ourworldindata/grapher/src/tabs/Tabs.tsx
similarity index 83%
rename from packages/@ourworldindata/components/src/Tabs/Tabs.tsx
rename to packages/@ourworldindata/grapher/src/tabs/Tabs.tsx
index 162c38ad3bb..a43388be1fe 100644
--- a/packages/@ourworldindata/components/src/Tabs/Tabs.tsx
+++ b/packages/@ourworldindata/grapher/src/tabs/Tabs.tsx
@@ -6,12 +6,14 @@ export const Tabs = ({
activeIndex,
setActiveIndex,
horizontalScroll = false,
+ maxTabWidth = 240,
slot,
}: {
labels: string[]
activeIndex: number
setActiveIndex: (label: number) => void
horizontalScroll?: boolean
+ maxTabWidth?: number | null // if null, don't clip labels
slot?: JSX.Element
}) => {
const container = useRef(null)
@@ -45,6 +47,15 @@ export const Tabs = ({
if (activeTabElement) activeTabElement.focus()
}
+ let style: React.CSSProperties | undefined = undefined
+ if (maxTabWidth !== null && Number.isFinite(maxTabWidth)) {
+ style = {
+ maxWidth: maxTabWidth,
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ }
+ }
+
return (
{
let label = origin.producer ?? ""
if (origin.title && origin.title !== label) {
- label += " - " + origin.title
+ label += " – " + origin.title
}
return {
label,
description: origin.description,
retrievedOn: origin.dateAccessed,
- retrievedFrom: origin.urlMain ? [origin.urlMain] : undefined,
+ retrievedFrom: origin.urlMain,
citation: origin.citationFull,
}
}
@@ -171,7 +171,7 @@ export const prepareSourcesForDisplay = (
description,
dataPublishedBy: source?.dataPublishedBy,
retrievedOn: source?.retrievedDate,
- retrievedFrom: splitSourceTextIntoFragments(source?.link),
+ retrievedFrom: source?.link,
})
}
@@ -183,3 +183,12 @@ export const prepareSourcesForDisplay = (
return sourcesForDisplay
}
+
+export const formatSourceDate = (
+ date: string | undefined,
+ format: string
+): string | null => {
+ const parsedDate = dayjs(date ?? "", ["YYYY-MM-DD", "DD/MM/YYYY"])
+ if (!parsedDate.isValid()) return date || null
+ return parsedDate.format(format)
+}
diff --git a/packages/@ourworldindata/utils/src/owidTypes.ts b/packages/@ourworldindata/utils/src/owidTypes.ts
index bce0c0eacaa..1293bc8b035 100644
--- a/packages/@ourworldindata/utils/src/owidTypes.ts
+++ b/packages/@ourworldindata/utils/src/owidTypes.ts
@@ -1737,6 +1737,6 @@ export interface DisplaySource {
description?: string
dataPublishedBy?: string
retrievedOn?: string
- retrievedFrom?: string[]
+ retrievedFrom?: string
citation?: string
}
diff --git a/site/DataPageContent.scss b/site/DataPageContent.scss
index 14e761e3cde..a79b3e8df38 100644
--- a/site/DataPageContent.scss
+++ b/site/DataPageContent.scss
@@ -171,14 +171,14 @@
ul {
padding-left: 1em;
- }
- li {
- @include body-2-regular;
- margin-bottom: 1em;
+ li {
+ @include body-2-regular;
+ margin-bottom: 1em;
- &:last-child {
- margin-bottom: 0;
+ &:last-child {
+ margin-bottom: 0;
+ }
}
}
}
@@ -192,6 +192,25 @@
}
}
+ .key-info__expandable-descriptions {
+ p {
+ margin: 8px 0;
+
+ &:first-of-type {
+ margin-top: 0;
+ }
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+
+ a {
+ @include owid-link-60;
+ color: inherit;
+ }
+ }
+
.key-info__key-description + .key-info__expandable-descriptions {
margin-top: 24px;
}
@@ -424,7 +443,7 @@
.reuse__list-item,
.citation__paragraph {
@include body-3-medium;
- margin: 0 0 16px;
+ margin: 0 0 8px;
}
.citation__how-to-header {
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index 6fd4d8b0d79..64c288acb0a 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -6,6 +6,7 @@ import {
CodeSnippet,
REUSE_THIS_WORK_SECTION_ID,
IndicatorSources,
+ DATAPAGE_ABOUT_THIS_DATA_SECTION_ID,
DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
IndicatorProcessing,
SimpleMarkdownText,
@@ -265,7 +266,7 @@ export const DataPageV2Content = ({
datapageData.source?.additionalInfo ? (
<>
What you should know about this
@@ -365,7 +366,7 @@ export const DataPageV2Content = ({
<>
About this data
@@ -678,6 +679,9 @@ export const DataPageV2Content = ({
citationShort
}
theme="light"
+ useMarkdown={
+ true
+ }
/>
)}
@@ -694,6 +698,9 @@ export const DataPageV2Content = ({
citationLong
}
theme="light"
+ useMarkdown={
+ true
+ }
/>
)}
@@ -716,6 +723,7 @@ export const DataPageV2Content = ({
)}