feat(grapher): first version of sources modal for metadata v2

owid · Oct 19, 2023 · 2b81377 · 2b81377
1 parent 50902bb
commit 2b81377
Show file tree

Hide file tree

Showing 11 changed files with 558 additions and 348 deletions.
diff --git a/datapage/Datapage.ts b/datapage/Datapage.ts
@@ -16,10 +16,10 @@ import {
     AllowedDataPageGdocFields,
     DataPageDataV2,
     OwidVariableWithSource,
-    dayjs,
     getAttributionFromVariable,
     gdocIdRegex,
-    getETLPathComponents,
+    getLastUpdatedFromVariable,
+    getNextUpdateFromVariable,
 } from "@ourworldindata/utils"
 import { ExplorerProgram } from "../explorer/ExplorerProgram.js"
 import { Gdoc } from "../db/model/Gdoc/Gdoc.js"
@@ -31,16 +31,8 @@ export const getDatapageDataV2 = async (
 ): Promise<DataPageDataV2> => {
     {
         const processingLevel = variableMetadata.processingLevel ?? "major"
-        const version =
-            getETLPathComponents(variableMetadata.catalogPath ?? "")?.version ??
-            ""
-        let nextUpdate = undefined
-        if (variableMetadata.updatePeriodDays) {
-            const date = dayjs(version)
-            nextUpdate = date
-                .add(variableMetadata.updatePeriodDays, "day")
-                .format("MMMM YYYY")
-        }
+        const version = getLastUpdatedFromVariable(variableMetadata) ?? ""
+        const nextUpdate = getNextUpdateFromVariable(variableMetadata)
         const datapageJson: DataPageDataV2 = {
             status: "draft",
             title:

diff --git a/packages/@ourworldindata/core-table/src/CoreColumnDef.ts b/packages/@ourworldindata/core-table/src/CoreColumnDef.ts
@@ -69,18 +69,24 @@ export interface CoreColumnDef extends ColumnColorScale {
     descriptionProcessing?: string
     descriptionKey?: string[]
     descriptionFromProducer?: string
+    lastUpdated?: string
+    nextUpdate?: string
     note?: string // Any internal notes the author wants to record for display in admin interfaces
 
     // Color
     color?: Color // A column can have a fixed color for use in charts where the columns are series
 
     // Source information used for display only
     source?: OwidSource
-    timespanFromMetadata?: string
+    timespan?: string
 
     // Metadata v2
     origins?: OwidOrigin[]
-    presentation?: Omit<OwidVariablePresentation, "topicTagsLinks">
+    presentation?: Omit<OwidVariablePresentation, "topicTagsLinks"> & {
+        attributionWithFallback?: string
+    }
+    owidProcessingLevel?: "minor" | "major"
+    owidSchemaVersion?: number
 
     // Dataset information
     datasetId?: number

diff --git a/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts b/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts
@@ -31,6 +31,9 @@ import {
     ColumnSlug,
     EPOCH_DATE,
     OwidChartDimensionInterface,
+    getAttributionFromVariable,
+    getLastUpdatedFromVariable,
+    getNextUpdateFromVariable,
 } from "@ourworldindata/utils"
 
 export const legacyToOwidTableAndDimensions = (
@@ -563,13 +566,18 @@ const columnDefFromOwidVariable = (
         display,
         timespan,
         nonRedistributable,
-        presentation,
+        presentation = {},
+        processingLevel,
+        schemaVersion,
     } = variable
 
     // Without this the much used var 123 appears as "Countries Continent". We could rename in Grapher but not sure the effects of that.
     const isContinent = variable.id === 123
     const name = isContinent ? "Continent" : variable.name
 
+    const lastUpdated = getLastUpdatedFromVariable(variable)
+    const nextUpdate = getNextUpdateFromVariable(variable)
+
     return {
         name,
         slug,
@@ -581,15 +589,22 @@ const columnDefFromOwidVariable = (
         descriptionProcessing,
         descriptionKey,
         descriptionFromProducer,
+        owidProcessingLevel: processingLevel,
+        owidSchemaVersion: schemaVersion,
         coverage,
         datasetId,
         datasetName,
         display,
         nonRedistributable,
         source,
-        timespanFromMetadata: timespan,
+        timespan,
         origins,
-        presentation,
+        presentation: {
+            ...presentation,
+            attributionWithFallback: getAttributionFromVariable(variable),
+        },
+        lastUpdated,
+        nextUpdate,
         owidVariableId: variable.id,
         type: isContinent
             ? ColumnTypeNames.Continent

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -1,76 +1,133 @@
 .SourcesModalContent {
     padding-bottom: $modal-padding;
 
-    .datasource-wrapper {
-        font-size: 0.8125rem;
+    $dark-text: #3d3d3d;
+    $light-text: #8c8c8c;
+    $link: #2162e6;
+
+    .sources {
         color: $dark-text;
-        line-height: 1.38461538;
+        font-size: 0.875em;
+        font-weight: 500;
+        line-height: 1.5;
+        letter-spacing: 0.01em;
 
-        & + .datasource-wrapper {
-            margin-top: 24px;
+        & + .sources {
+            margin-top: 4em;
         }
 
-        > h2 {
-            color: $dark-text;
-            font-family: $serif-font-stack !important;
-            font-size: 1.4em;
-            font-weight: 600;
-            margin: 0;
-            margin-bottom: 0.4em;
+        h2 {
+            font-family: $serif-font-stack;
+            font-size: 1.25rem;
+            line-height: 1.33;
+            font-weight: 700;
+            margin-bottom: 24px;
+            margin-top: 0;
         }
 
-        h2,
-        h3,
-        h4 {
-            margin-left: 0px;
-            font-family: inherit;
+        h3 {
+            font-family: $serif-font-stack;
+            line-height: 1.33;
+            font-weight: 700;
+            font-size: 1.125rem;
+            margin-top: 2em;
+            margin-bottom: 1em;
         }
 
-        h3,
         h4 {
-            margin-top: 2px;
-            margin-bottom: 1px;
-            font-size: 0.9em;
-            font-weight: bold;
+            font-family: $serif-font-stack;
+            line-height: 1.5;
+            font-weight: 600;
+            display: block;
+            font-size: 1rem;
+            margin-top: 1em;
+            margin-bottom: 0.5em;
         }
 
-        ul,
-        ol {
-            margin-left: 1.1rem;
+        ul {
+            margin: 1em 0 1em 1em;
+
+            li + li {
+                margin-top: 0.5em;
+            }
         }
 
-        table {
-            width: 100%;
-            border-spacing: 0;
+        p {
+            color: $light-text;
         }
 
-        td {
-            padding: 16px 0;
-            vertical-align: top;
-            border-top: 1px solid #ddd;
-            font-size: 13px;
-            line-height: 1.3846153846;
+        a {
+            color: currentColor;
+
+            &:hover {
+                text-decoration: underline;
+            }
         }
 
-        td:first-child {
-            padding-right: 24px;
-            color: $light-text;
-            min-width: 100px;
+        .link__learn-more {
+            color: $link;
+
+            svg {
+                margin-left: 6px;
+            }
         }
 
-        tr:first-child td {
-            border: 0;
+        .key-info {
+            display: flex;
+            flex-wrap: wrap;
+            row-gap: 1em;
+            column-gap: 1.5em;
         }
 
-        a {
-            text-decoration: underline;
-            color: inherit;
-            word-break: break-word;
+        .key-data {
+            &:first-of-type {
+                flex-basis: 45%;
+            }
+
+            &__title {
+                color: $light-text;
+                margin-bottom: 4px;
+            }
         }
 
-        p.additionalInfo {
-            margin: 0;
-            margin-top: 1em;
+        .origin {
+            margin: 1.5em 0;
+
+            + .origin {
+                border-top: 1px solid #e7e7e7;
+            }
+
+            &__key-information {
+                display: flex;
+                flex-wrap: wrap;
+                row-gap: 1em;
+                column-gap: 1.5em;
+            }
+
+            &__key-data__content {
+                color: $light-text;
+            }
+        }
+
+        .call-out {
+            background-color: #f7f7f7;
+            padding: 1.5em;
+            margin-top: 1.5em;
+
+            h5 {
+                font-size: 0.8571em;
+                font-weight: 900;
+                line-height: 1.3333;
+                letter-spacing: 0.1em;
+                text-transform: uppercase;
+                margin-top: 0;
+                margin-bottom: 0.5em;
+                color: #5e5e5e;
+            }
+
+            p {
+                margin-bottom: 0;
+            }
         }
     }
 }