Skip to content

Commit

Permalink
✨ add source to indicator and indicators sources to admin
Browse files Browse the repository at this point in the history
  • Loading branch information
Marigold committed Dec 14, 2023
1 parent a44ccfa commit 08036af
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 69 deletions.
66 changes: 10 additions & 56 deletions adminSiteClient/DatasetEditPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { BindString, Toggle, FieldsRow, Timeago } from "./Forms.js"
import { EditableTags } from "./EditableTags.js"
import { ChartList, ChartListItem } from "./ChartList.js"
import { OriginList } from "./OriginList.js"
import { SourceList } from "./SourceList.js"
import { VariableList, VariableListItem } from "./VariableList.js"
import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
Expand Down Expand Up @@ -43,6 +44,7 @@ interface DatasetPageData {
variables: VariableListItem[]
charts: ChartListItem[]
source?: OwidSource
variableSources: OwidSource[]
zipFile?: { filename: string }

origins: OwidOrigin[]
Expand Down Expand Up @@ -284,39 +286,6 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
disabled={isDisabled}
helpText="Short name for this dataset, followed by the source and year. Example: Government Revenue Data – ICTD (2016)"
/>
<BindString
field="additionalInfo"
store={newDataset.source}
label="Description"
secondaryLabel="DB field: sources.description ->> '$.additionalInfo' - only the lowest id source is shown!"
textarea
disabled={isDisabled}
helpText="Describe the dataset and the methodology used in its construction. This can be as long and detailed as you like."
rows={10}
/>
<BindString
field="link"
store={newDataset.source}
label="Link"
secondaryLabel="DB field: sources.description ->> '$.link' - only the lowest id source is shown!"
disabled={isDisabled}
helpText="Link to the publication from which we retrieved this data"
/>
<BindString
field="retrievedDate"
store={newDataset.source}
label="Retrieved"
secondaryLabel="DB field: sources.description ->> '$.retrievedDate' - only the lowest id source is shown!"
disabled={isDisabled}
helpText="Date when this data was obtained by us. Date format should always be YYYY-MM-DD."
/>
<BindString
label="Number of days between OWID updates"
field="updatePeriodDays"
store={newDataset}
disabled={isDisabled}
helpText="Date when this data was obtained by us. Date format should always be YYYY-MM-DD."
/>
<DatasetTagEditor
newDataset={newDataset}
availableTags={dataset.availableTags}
Expand Down Expand Up @@ -344,32 +313,13 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
/>
</FieldsRow>
</div>

<div className="col">
<BindString
field="name"
store={newDataset.source}
label="Source name"
secondaryLabel="DB field: sources.description ->> '$.name' - only the lowest id source is shown!"
disabled={isDisabled}
helpText={`Short citation of the main sources, to be displayed on the charts. Additional sources (e.g. population denominator) should not be included. Use semi-colons to separate multiple sources e.g. "UN (2022); World Bank (2022)". For institutional datasets or reports, use "Institution, Project (year or vintage)" e.g. "IHME, Global Burden of Disease (2019)". For data we have modified extensively, use "Our World in Data based on X (year)" e.g. "Our World in Data based on Pew Research Center (2022)". For academic papers, use "Authors (year)" e.g. "Arroyo-Abad and Lindert (2016)".`}
/>

<BindString
field="dataPublishedBy"
store={newDataset.source}
label="Data published by"
secondaryLabel="DB field: sources.description ->> '$.dataPublishedBy' - only the lowest id source is shown!"
disabled={isDisabled}
helpText={`Full citation of main and additional sources. For academic papers, institutional datasets, and reports, use the complete citation recommended by the publisher. For data we have modified extensively, use "Our World in Data based on X (year) and Y (year)" e.g. "Our World in Data based on Pew Research Center (2022) and UN (2022)".`}
/>
<BindString
field="dataPublisherSource"
store={newDataset.source}
label="Data publisher's source"
secondaryLabel="DB field: sources.description ->> '$.dataPublisherSource' - only the lowest id source is shown!"
label="Number of days between OWID updates"
field="updatePeriodDays"
store={newDataset}
disabled={isDisabled}
helpText={`Optional field. Basic indication of how the publisher collected this data e.g. "Survey data". Anything longer than a line should go in the dataset description.`}
helpText="Date when this data was obtained by us. Date format should always be YYYY-MM-DD."
/>
<BindString
field="description"
Expand All @@ -392,6 +342,10 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
<h3>Origins</h3>
<OriginList origins={dataset.origins || []} />
</section>
<section>
<h3>Sources</h3>
<SourceList sources={dataset.variableSources || []} />
</section>
<section>
<h3>Indicators</h3>
<VariableList variables={dataset.variables} />
Expand Down
85 changes: 85 additions & 0 deletions adminSiteClient/SourceList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React from "react"
import { observer } from "mobx-react"
import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
import { OwidSource } from "@ourworldindata/utils"
import { BindString } from "./Forms.js"

@observer
export class SourceList extends React.Component<{
sources: OwidSource[]
}> {
static contextType = AdminAppContext
context!: AdminAppContextType

render() {
const { sources } = this.props
const isDisabled = true

return (
<div>
{sources.map((source, index) => (
<div key={index}>
<div className="row">
<div className="col">
<BindString
field="name"
store={source}
label="Source name"
secondaryLabel="DB field: sources.description ->> '$.name'"
disabled={isDisabled}
// helpText={`Short citation of the main sources, to be displayed on the charts. Additional sources (e.g. population denominator) should not be included. Use semi-colons to separate multiple sources e.g. "UN (2022); World Bank (2022)". For institutional datasets or reports, use "Institution, Project (year or vintage)" e.g. "IHME, Global Burden of Disease (2019)". For data we have modified extensively, use "Our World in Data based on X (year)" e.g. "Our World in Data based on Pew Research Center (2022)". For academic papers, use "Authors (year)" e.g. "Arroyo-Abad and Lindert (2016)".`}
/>
<BindString
field="dataPublishedBy"
store={source}
label="Data published by"
secondaryLabel="DB field: sources.description ->> '$.dataPublishedBy'"
disabled={isDisabled}
// helpText={`Full citation of main and additional sources. For academic papers, institutional datasets, and reports, use the complete citation recommended by the publisher. For data we have modified extensively, use "Our World in Data based on X (year) and Y (year)" e.g. "Our World in Data based on Pew Research Center (2022) and UN (2022)".`}
/>
<BindString
field="dataPublisherSource"
store={source}
label="Data publisher's source"
secondaryLabel="DB field: sources.description ->> '$.dataPublisherSource'"
disabled={isDisabled}
// helpText={`Optional field. Basic indication of how the publisher collected this data e.g. "Survey data". Anything longer than a line should go in the dataset description.`}
/>
<BindString
field="link"
store={source}
label="Link"
secondaryLabel="DB field: sources.description ->> '$.link'"
disabled={isDisabled}
// helpText="Link to the publication from which we retrieved this data"
/>
<BindString
field="retrievedDate"
store={source}
label="Retrieved"
secondaryLabel="DB field: sources.description ->> '$.retrievedDate'"
disabled={isDisabled}
// helpText="Date when this data was obtained by us. Date format should always be YYYY-MM-DD."
/>
</div>

<div className="col">
<BindString
field="additionalInfo"
store={source}
label="Additional info"
secondaryLabel="DB field: sources.description ->> '$.additionalInfo'"
textarea
disabled={isDisabled}
// helpText="Describe the dataset and the methodology used in its construction. This can be as long and detailed as you like."
rows={15}
/>
</div>
</div>
<hr />
</div>
))}
</div>
)
}
}
32 changes: 21 additions & 11 deletions adminSiteClient/VariableEditPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,12 @@ import {
getETLPathComponents,
OwidProcessingLevel,
OwidOrigin,
OwidSource,
} from "@ourworldindata/utils"
import { GrapherFigureView } from "../site/GrapherFigureView.js"
import { ChartList, ChartListItem } from "./ChartList.js"
import { OriginList } from "./OriginList.js"
import { SourceList } from "./SourceList.js"
import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
import { Base64 } from "js-base64"
import {
Expand Down Expand Up @@ -75,6 +77,8 @@ class VariableEditable

@observable origins: OwidOrigin[] = []

@observable source: OwidSource | undefined = undefined

constructor(json: any) {
for (const key in this) {
if (key === "display") lodash.extend(this.display, json.display)
Expand Down Expand Up @@ -435,24 +439,30 @@ class VariableEditor extends React.Component<{ variable: VariablePageData }> {
<div className="col">
<form>
<section>
<section>
<h3>
Origins&nbsp;
<a href="https://docs.owid.io/projects/etl/architecture/metadata/reference/origin/">
<FontAwesomeIcon
icon={faCircleInfo}
className="text-muted"
/>
</a>
</h3>
</section>
<h3>
Origins&nbsp;
<a href="https://docs.owid.io/projects/etl/architecture/metadata/reference/origin/">
<FontAwesomeIcon
icon={faCircleInfo}
className="text-muted"
/>
</a>
</h3>
<OriginList
origins={newVariable.origins || []}
/>
</section>
</form>
</div>
</div>
{newVariable.source && (
<section>
<form>
<h3>Source</h3>
<SourceList sources={[newVariable.source]} />
</form>
</section>
)}
<section>
<h3>Charts</h3>
<ChartList charts={variable.charts} />
Expand Down
13 changes: 11 additions & 2 deletions adminSiteServer/apiRouter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1879,8 +1879,8 @@ apiRouter.get("/datasets/:datasetId.json", async (req: Request) => {

dataset.origins = origins

// Currently for backwards compatibility datasets can still have multiple sources
// but the UI presents only a single item of source metadata, we use the first source
// This is only for backwards compatibility where we showed only the first source per
// dataset. We now show all of them, so perhaps this part could be removed.
const sources = await db.queryMysql(
`
SELECT s.id, s.name, s.description
Expand All @@ -1897,6 +1897,15 @@ apiRouter.get("/datasets/:datasetId.json", async (req: Request) => {
dataset.source.name = sources[0].name
}

// expand description of sources and add to dataset as variableSources
dataset.variableSources = sources.map((s: any) => {
return {
id: s.id,
name: s.name,
...JSON.parse(s.description),
}
})

const charts = await db.queryMysql(
`
SELECT ${OldChart.listFields}
Expand Down

0 comments on commit 08036af

Please sign in to comment.