From 4d78105acc8e8974f223efef6c3a16fba174d2fc Mon Sep 17 00:00:00 2001 From: Pablo Rosado Date: Thu, 12 Oct 2023 10:02:38 +0200 Subject: [PATCH 1/3] Add description key and description processing to sources tab --- .../core-table/src/CoreColumnDef.ts | 2 + .../grapher/src/core/LegacyToOwidTable.ts | 4 ++ .../grapher/src/sourcesTab/SourcesTab.tsx | 43 +++++++++++++++++++ 3 files changed, 49 insertions(+) diff --git a/packages/@ourworldindata/core-table/src/CoreColumnDef.ts b/packages/@ourworldindata/core-table/src/CoreColumnDef.ts index 3f48540f74a..8e15ede4c92 100644 --- a/packages/@ourworldindata/core-table/src/CoreColumnDef.ts +++ b/packages/@ourworldindata/core-table/src/CoreColumnDef.ts @@ -67,6 +67,8 @@ export interface CoreColumnDef extends ColumnColorScale { attributionShort?: string // The Metadata V2 title disambiguation fragment for the producer description?: string descriptionShort?: string + descriptionProcessing?: string + descriptionKey?: string[] descriptionFromProducer?: string note?: string // Any internal notes the author wants to record for display in admin interfaces diff --git a/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts b/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts index 4848f321ff5..7b5a436040e 100644 --- a/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts +++ b/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts @@ -555,6 +555,8 @@ const columnDefFromOwidVariable = ( datasetId, datasetName, descriptionShort, + descriptionProcessing, + descriptionKey, descriptionFromProducer, source, origins, @@ -578,6 +580,8 @@ const columnDefFromOwidVariable = ( shortUnit, description, descriptionShort, + descriptionProcessing, + descriptionKey, descriptionFromProducer, coverage, datasetId, diff --git a/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx b/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx index 78e27ca4daa..a71f5b439a2 100644 --- a/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx +++ b/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx @@ -139,6 +139,49 @@ export class SourcesTab extends React.Component<{ ) : null} + {column.def.descriptionKey && + column.def.descriptionKey.length === 1 ? ( + + Key information + + + + + ) : null} + {column.def.descriptionKey && + column.def.descriptionKey.length > 1 ? ( + + Key information + + + + + ) : null} + {column.def.descriptionProcessing ? ( + + Processing notes + + + + + ) : null} {coverage ? ( Variable geographic coverage From 262d54fe77f75884d1662b28b9f860a6007b1470 Mon Sep 17 00:00:00 2001 From: Daniel Bachler Date: Fri, 13 Oct 2023 12:09:31 +0200 Subject: [PATCH 2/3] :lipstick: add new simpler markdown component to fix bullet point oddities in sources tab --- .../grapher/src/sourcesTab/SourcesTab.scss | 4 +- .../grapher/src/sourcesTab/SourcesTab.tsx | 45 ++++++------------- .../utils/src/SimpleMarkdownText.tsx | 40 +++++++++++++++++ packages/@ourworldindata/utils/src/index.ts | 2 + 4 files changed, 59 insertions(+), 32 deletions(-) create mode 100644 packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx diff --git a/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.scss b/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.scss index bd5f9b3609d..23f0c388b0b 100644 --- a/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.scss +++ b/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.scss @@ -44,7 +44,9 @@ .datasource-wrapper ul, .datasource-wrapper ol { - margin-left: 1.1rem; + margin-left: 0; + padding-left: 1rem; + margin-bottom: 0; } .datasource-wrapper table { diff --git a/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx b/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx index a71f5b439a2..487e2241424 100644 --- a/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx +++ b/packages/@ourworldindata/grapher/src/sourcesTab/SourcesTab.tsx @@ -1,7 +1,7 @@ import { Bounds, DEFAULT_BOUNDS, - MarkdownTextWrap, + SimpleMarkdownText, OwidOrigin, uniq, excludeNullish, @@ -21,20 +21,17 @@ export interface SourcesTabManager { // TODO: remove this component once all backported indicators // etc have switched from HTML to markdown for their sources -const HtmlOrMarkdownText = (props: { - text: string - fontSize: number -}): JSX.Element => { +const HtmlOrMarkdownText = (props: { text: string }): JSX.Element => { // check the text for closing a, li or p tags. If // one is found, render using dangerouslySetInnerHTML, - // othewise use MarkdownTextWrap - const { text, fontSize } = props + // othewise use SimpleMarkdownText + const { text } = props const htmlRegex = /<\/(a|li|p)>/ const match = text.match(htmlRegex) if (match) { return } else { - return + return } } @@ -119,9 +116,8 @@ export class SourcesTab extends React.Component<{ Variable description - @@ -132,9 +128,8 @@ export class SourcesTab extends React.Component<{ Variable description - @@ -144,9 +139,8 @@ export class SourcesTab extends React.Component<{ Key information - @@ -160,9 +154,8 @@ export class SourcesTab extends React.Component<{ {column.def.descriptionKey.map( (info: string, index: number) => (
  • -
    • ) @@ -175,9 +168,8 @@ export class SourcesTab extends React.Component<{ Processing notes - @@ -204,9 +196,8 @@ export class SourcesTab extends React.Component<{ Data published by - @@ -222,9 +213,8 @@ export class SourcesTab extends React.Component<{ index: number ) => (
  • -
    • ) @@ -239,7 +229,6 @@ export class SourcesTab extends React.Component<{ @@ -248,10 +237,7 @@ export class SourcesTab extends React.Component<{ Link - + ) : null} @@ -265,10 +251,7 @@ export class SourcesTab extends React.Component<{ {source.additionalInfo && (

    - +

    )} diff --git a/packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx b/packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx new file mode 100644 index 00000000000..696f0badb42 --- /dev/null +++ b/packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx @@ -0,0 +1,40 @@ +import React from "react" +import { computed } from "mobx" +import { + IRToken, + parsimmonToTextTokens, + recursiveMergeTextTokens, +} from "./MarkdownTextWrap/MarkdownTextWrap.js" +import { MarkdownRoot, mdParser } from "./MarkdownTextWrap/parser.js" +type SimpleMarkdownTextProps = { + text: string + detailsOrderedByReference?: Set +} + +export class SimpleMarkdownText extends React.Component { + @computed get text(): string { + return this.props.text + } + + @computed get detailsOrderedByReference(): Set { + return this.props.detailsOrderedByReference || new Set() + } + @computed get ast(): MarkdownRoot["children"] { + if (!this.text) return [] + const result = mdParser.markdown.parse(this.props.text) + if (result.status) { + return result.value.children + } + return [] + } + + @computed get tokens(): IRToken[] { + const tokens = parsimmonToTextTokens(this.ast, {}) + return recursiveMergeTextTokens(tokens) + } + + render(): JSX.Element | null { + const { tokens } = this + return <>{tokens.map((token, index) => token.toHTML(index))} + } +} diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts index f9811fb19e9..c023322300e 100644 --- a/packages/@ourworldindata/utils/src/index.ts +++ b/packages/@ourworldindata/utils/src/index.ts @@ -602,6 +602,8 @@ export { sumTextWrapHeights, } from "./MarkdownTextWrap/MarkdownTextWrap.js" +export { SimpleMarkdownText } from "./SimpleMarkdownText.js" + export { extractDetailsFromSyntax, mdParser, From f4d9ba5a9a26271ad1db1ef897b14ff32a4ba5e1 Mon Sep 17 00:00:00 2001 From: Daniel Bachler Date: Fri, 13 Oct 2023 12:13:30 +0200 Subject: [PATCH 3/3] :honeybee: remove obsolete prop --- packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx b/packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx index 696f0badb42..067900dbd05 100644 --- a/packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx +++ b/packages/@ourworldindata/utils/src/SimpleMarkdownText.tsx @@ -8,7 +8,6 @@ import { import { MarkdownRoot, mdParser } from "./MarkdownTextWrap/parser.js" type SimpleMarkdownTextProps = { text: string - detailsOrderedByReference?: Set } export class SimpleMarkdownText extends React.Component { @@ -16,9 +15,6 @@ export class SimpleMarkdownText extends React.Component return this.props.text } - @computed get detailsOrderedByReference(): Set { - return this.props.detailsOrderedByReference || new Set() - } @computed get ast(): MarkdownRoot["children"] { if (!this.text) return [] const result = mdParser.markdown.parse(this.props.text)