Merge master into grapher-redesign branch

owid · Sep 25, 2023 · 187156c · 187156c
2 parents e3e164e + 64753e3
commit 187156c
Show file tree

Hide file tree

Showing 91 changed files with 4,168 additions and 1,869 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -6,7 +6,7 @@
         },
         {
             "path": "./dist/assets/owid.mjs",
-            "maxSize": "260 KB"
+            "maxSize": "545 KB"
         }
     ],
     "defaultCompression": "none"

diff --git a/adminSiteClient/ChartList.tsx b/adminSiteClient/ChartList.tsx
@@ -1,17 +1,13 @@
 import React from "react"
 import { observer } from "mobx-react"
-import { action, runInAction, observable } from "mobx"
-import * as lodash from "lodash"
-
-import { Link } from "./Link.js"
+import { runInAction, observable } from "mobx"
 import { Tag } from "./TagBadge.js"
 import { bind } from "decko"
-import { EditableTags, Timeago } from "./Forms.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
-import { BAKED_GRAPHER_URL } from "../settings/clientSettings.js"
 import { ChartTypeName, GrapherInterface } from "@ourworldindata/grapher"
 import { startCase } from "@ourworldindata/utils"
 import { References, getFullReferencesCount } from "./ChartEditor.js"
+import { ChartRow } from "./ChartRow.js"
 
 // These properties are coming from OldChart.ts
 export interface ChartListItem {
@@ -36,129 +32,6 @@ export interface ChartListItem {
     tags: Tag[]
 }
 
-function showChartType(chart: ChartListItem) {
-    const chartType = chart.type ?? ChartTypeName.LineChart
-    const displayType = ChartTypeName[chartType]
-        ? startCase(ChartTypeName[chartType])
-        : "Unknown"
-
-    if (chart.tab === "map") {
-        if (chart.hasChartTab) return `Map + ${displayType}`
-        else return "Map"
-    } else {
-        if (chart.hasMapTab) return `${displayType} + Map`
-        else return displayType
-    }
-}
-
-@observer
-class ChartRow extends React.Component<{
-    chart: ChartListItem
-    searchHighlight?: (text: string) => string | JSX.Element
-    availableTags: Tag[]
-    onDelete: (chart: ChartListItem) => void
-}> {
-    static contextType = AdminAppContext
-    context!: AdminAppContextType
-
-    async saveTags(tags: Tag[]) {
-        const { chart } = this.props
-        const json = await this.context.admin.requestJSON(
-            `/api/charts/${chart.id}/setTags`,
-            { tags },
-            "POST"
-        )
-        if (json.success) {
-            runInAction(() => (chart.tags = tags))
-        }
-    }
-
-    @action.bound onSaveTags(tags: Tag[]) {
-        this.saveTags(tags)
-    }
-
-    render() {
-        const { chart, searchHighlight, availableTags } = this.props
-
-        const highlight = searchHighlight || lodash.identity
-
-        return (
-            <tr>
-                <td style={{ minWidth: "140px", width: "12.5%" }}>
-                    {chart.isPublished && (
-                        <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
-                            <img
-                                src={`${BAKED_GRAPHER_URL}/exports/${chart.slug}.svg`}
-                                className="chartPreview"
-                            />
-                        </a>
-                    )}
-                </td>
-                <td style={{ minWidth: "180px" }}>
-                    {chart.isPublished ? (
-                        <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
-                            {highlight(chart.title ?? "")}
-                        </a>
-                    ) : (
-                        <span>
-                            <span style={{ color: "red" }}>Draft: </span>{" "}
-                            {highlight(chart.title ?? "")}
-                        </span>
-                    )}{" "}
-                    {chart.variantName ? (
-                        <span style={{ color: "#aaa" }}>
-                            ({highlight(chart.variantName)})
-                        </span>
-                    ) : undefined}
-                    {chart.internalNotes && (
-                        <div className="internalNotes">
-                            {highlight(chart.internalNotes)}
-                        </div>
-                    )}
-                </td>
-                <td style={{ minWidth: "100px" }}>{chart.id}</td>
-                <td style={{ minWidth: "100px" }}>{showChartType(chart)}</td>
-                <td style={{ minWidth: "340px" }}>
-                    <EditableTags
-                        tags={chart.tags}
-                        suggestions={availableTags}
-                        onSave={this.onSaveTags}
-                        hasKeyChartSupport={true}
-                    />
-                </td>
-                <td>
-                    <Timeago
-                        time={chart.publishedAt}
-                        by={highlight(chart.publishedBy)}
-                    />
-                </td>
-                <td>
-                    <Timeago
-                        time={chart.lastEditedAt}
-                        by={highlight(chart.lastEditedBy)}
-                    />
-                </td>
-                <td>
-                    <Link
-                        to={`/charts/${chart.id}/edit`}
-                        className="btn btn-primary"
-                    >
-                        Edit
-                    </Link>
-                </td>
-                <td>
-                    <button
-                        className="btn btn-danger"
-                        onClick={() => this.props.onDelete(chart)}
-                    >
-                        Delete
-                    </button>
-                </td>
-            </tr>
-        )
-    }
-}
-
 @observer
 export class ChartList extends React.Component<{
     charts: ChartListItem[]
@@ -260,3 +133,18 @@ export class ChartList extends React.Component<{
         )
     }
 }
+
+export function showChartType(chart: ChartListItem) {
+    const chartType = chart.type ?? ChartTypeName.LineChart
+    const displayType = ChartTypeName[chartType]
+        ? startCase(ChartTypeName[chartType])
+        : "Unknown"
+
+    if (chart.tab === "map") {
+        if (chart.hasChartTab) return `Map + ${displayType}`
+        else return "Map"
+    } else {
+        if (chart.hasMapTab) return `${displayType} + Map`
+        else return displayType
+    }
+}
diff --git a/adminSiteClient/ChartRow.tsx b/adminSiteClient/ChartRow.tsx
@@ -0,0 +1,124 @@
+import React from "react"
+import { observer } from "mobx-react"
+import { action, runInAction } from "mobx"
+import * as lodash from "lodash"
+import { Link } from "./Link.js"
+import { Tag } from "./TagBadge.js"
+import { Timeago } from "./Forms.js"
+import { EditableTags, TaggableType } from "./EditableTags.js"
+import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
+import {
+    BAKED_GRAPHER_EXPORTS_BASE_URL,
+    BAKED_GRAPHER_URL,
+} from "../settings/clientSettings.js"
+import { ChartListItem, showChartType } from "./ChartList.js"
+
+@observer
+export class ChartRow extends React.Component<{
+    chart: ChartListItem
+    searchHighlight?: (text: string) => string | JSX.Element
+    availableTags: Tag[]
+    onDelete: (chart: ChartListItem) => void
+}> {
+    static contextType = AdminAppContext
+    context!: AdminAppContextType
+
+    async saveTags(tags: Tag[]) {
+        const { chart } = this.props
+        const json = await this.context.admin.requestJSON(
+            `/api/charts/${chart.id}/setTags`,
+            { tags },
+            "POST"
+        )
+        if (json.success) {
+            runInAction(() => (chart.tags = tags))
+        }
+    }
+
+    @action.bound onSaveTags(tags: Tag[]) {
+        this.saveTags(tags)
+    }
+
+    render() {
+        const { chart, searchHighlight, availableTags } = this.props
+
+        const highlight = searchHighlight || lodash.identity
+
+        return (
+            <tr>
+                <td style={{ minWidth: "140px", width: "12.5%" }}>
+                    {chart.isPublished && (
+                        <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
+                            <img
+                                src={`${BAKED_GRAPHER_EXPORTS_BASE_URL}/${chart.slug}.svg`}
+                                className="chartPreview"
+                            />
+                        </a>
+                    )}
+                </td>
+                <td style={{ minWidth: "180px" }}>
+                    {chart.isPublished ? (
+                        <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
+                            {highlight(chart.title ?? "")}
+                        </a>
+                    ) : (
+                        <span>
+                            <span style={{ color: "red" }}>Draft: </span>{" "}
+                            {highlight(chart.title ?? "")}
+                        </span>
+                    )}{" "}
+                    {chart.variantName ? (
+                        <span style={{ color: "#aaa" }}>
+                            ({highlight(chart.variantName)})
+                        </span>
+                    ) : undefined}
+                    {chart.internalNotes && (
+                        <div className="internalNotes">
+                            {highlight(chart.internalNotes)}
+                        </div>
+                    )}
+                </td>
+                <td style={{ minWidth: "100px" }}>{chart.id}</td>
+                <td style={{ minWidth: "100px" }}>{showChartType(chart)}</td>
+                <td style={{ minWidth: "340px" }}>
+                    <EditableTags
+                        tags={chart.tags}
+                        suggestions={availableTags}
+                        onSave={this.onSaveTags}
+                        hasKeyChartSupport
+                        hasSuggestionsSupport
+                        taggable={{ type: TaggableType.Charts, id: chart.id }}
+                    />
+                </td>
+                <td>
+                    <Timeago
+                        time={chart.publishedAt}
+                        by={highlight(chart.publishedBy)}
+                    />
+                </td>
+                <td>
+                    <Timeago
+                        time={chart.lastEditedAt}
+                        by={highlight(chart.lastEditedBy)}
+                    />
+                </td>
+                <td>
+                    <Link
+                        to={`/charts/${chart.id}/edit`}
+                        className="btn btn-primary"
+                    >
+                        Edit
+                    </Link>
+                </td>
+                <td>
+                    <button
+                        className="btn btn-danger"
+                        onClick={() => this.props.onDelete(chart)}
+                    >
+                        Delete
+                    </button>
+                </td>
+            </tr>
+        )
+    }
+}
diff --git a/adminSiteClient/DatasetEditPage.tsx b/adminSiteClient/DatasetEditPage.tsx
@@ -9,13 +9,8 @@ import { OwidSource } from "@ourworldindata/utils"
 
 import { AdminLayout } from "./AdminLayout.js"
 import { Link } from "./Link.js"
-import {
-    BindString,
-    Toggle,
-    FieldsRow,
-    EditableTags,
-    Timeago,
-} from "./Forms.js"
+import { BindString, Toggle, FieldsRow, Timeago } from "./Forms.js"
+import { EditableTags } from "./EditableTags.js"
 import { ChartList, ChartListItem } from "./ChartList.js"
 import { Tag } from "./TagBadge.js"
 import { VariableList, VariableListItem } from "./VariableList.js"

diff --git a/adminSiteClient/DatasetList.tsx b/adminSiteClient/DatasetList.tsx
@@ -7,7 +7,8 @@ import { bind } from "decko"
 import { Link } from "./Link.js"
 import { Tag } from "./TagBadge.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
-import { EditableTags, Timeago } from "./Forms.js"
+import { Timeago } from "./Forms.js"
+import { EditableTags } from "./EditableTags.js"
 
 export interface DatasetListItem {
     id: number