Merge pull request #3695 from owid/tags-graph

🎉 Tag Graph
owid · Jun 17, 2024 · 587a97b · 587a97b
2 parents f28d179 + fd7b3ce
commit 587a97b
Show file tree

Hide file tree

Showing 18 changed files with 1,245 additions and 252 deletions.
diff --git a/adminSiteClient/AdminApp.tsx b/adminSiteClient/AdminApp.tsx
@@ -16,6 +16,7 @@ import { RedirectsIndexPage } from "./RedirectsIndexPage.js"
 import SiteRedirectsIndexPage from "./SiteRedirectsIndexPage"
 import { TagEditPage } from "./TagEditPage.js"
 import { TagsIndexPage } from "./TagsIndexPage.js"
+import { TagGraphPage } from "./TagGraphPage.js"
 import { PostsIndexPage } from "./PostsIndexPage.js"
 import { TestIndexPage } from "./TestIndexPage.js"
 import { NotFoundPage } from "./NotFoundPage.js"
@@ -263,6 +264,11 @@ export class AdminApp extends React.Component<{
                                     />
                                 )}
                             />
+                            <Route
+                                exact
+                                path="/tag-graph"
+                                component={TagGraphPage}
+                            />
                             <Route
                                 exact
                                 path="/tags"

diff --git a/adminSiteClient/AdminSidebar.tsx b/adminSiteClient/AdminSidebar.tsx
@@ -18,6 +18,7 @@ import {
     faCodeBranch,
     faDownload,
     faHatWizard,
+    faSitemap,
 } from "@fortawesome/free-solid-svg-icons"
 
 import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
@@ -89,6 +90,11 @@ export const AdminSidebar = (): React.ReactElement => (
                     <FontAwesomeIcon icon={faTag} /> Tags
                 </Link>
             </li>
+            <li>
+                <Link to="/tag-graph">
+                    <FontAwesomeIcon icon={faSitemap} /> Tag Graph
+                </Link>
+            </li>
             <li>
                 <Link to="/bulk-downloads">
                     <FontAwesomeIcon icon={faDownload} /> Bulk downloads

diff --git a/adminSiteClient/TagEditPage.tsx b/adminSiteClient/TagEditPage.tsx
@@ -1,31 +1,28 @@
 import React from "react"
 import { observer } from "mobx-react"
-import { observable, computed, action, runInAction } from "mobx"
+import { observable, computed, runInAction } from "mobx"
 import { Prompt, Redirect } from "react-router-dom"
 import { DbChartTagJoin } from "@ourworldindata/utils"
 import { AdminLayout } from "./AdminLayout.js"
-import { BindString, NumericSelectField, FieldsRow, Timeago } from "./Forms.js"
+import { BindString, Timeago } from "./Forms.js"
 import { DatasetList, DatasetListItem } from "./DatasetList.js"
 import { ChartList, ChartListItem } from "./ChartList.js"
 import { TagBadge } from "./TagBadge.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 interface TagPageData {
     id: number
-    parentId?: number
     name: string
     specialType?: string
     updatedAt: string
     datasets: DatasetListItem[]
     charts: ChartListItem[]
     children: DbChartTagJoin[]
-    possibleParents: DbChartTagJoin[]
     slug: string | null
 }
 
 class TagEditable {
     @observable name: string = ""
-    @observable parentId?: number
     @observable slug: string | null = null
 
     constructor(json: TagPageData) {
@@ -84,7 +81,7 @@ class TagEditor extends React.Component<{ tag: TagPageData }> {
 
         if (
             !window.confirm(
-                `Really delete the category ${tag.name}? This action cannot be undone!`
+                `Really delete the tag ${tag.name}? This action cannot be undone!`
             )
         )
             return
@@ -100,21 +97,6 @@ class TagEditor extends React.Component<{ tag: TagPageData }> {
         }
     }
 
-    @action.bound onChooseParent(parentId: number) {
-        if (parentId === -1) {
-            this.newtag.parentId = undefined
-        } else {
-            this.newtag.parentId = parentId
-        }
-    }
-
-    @computed get parentTag() {
-        const { parentId } = this.props.tag
-        return parentId
-            ? this.props.tag.possibleParents.find((c) => c.id === parentId)
-            : undefined
-    }
-
     render() {
         const { tag } = this.props
         const { newtag } = this
@@ -142,49 +124,30 @@ class TagEditor extends React.Component<{ tag: TagPageData }> {
                             field="name"
                             store={newtag}
                             label="Name"
-                            helpText="Category names should ideally be unique across the database and able to be understood without context"
+                            helpText="Tag names must be unique and should be able to be understood without context"
                         />
                         <BindString
                             field="slug"
                             store={newtag}
                             label="Slug"
-                            helpText="The slug for this tag's topic page, e.g. trade-and-globalization. If specified, we assume this tag is a topic."
+                            helpText="The slug for this tag's topic page, e.g. trade-and-globalization. If specified, we assume this tag is a topic. Must be unique"
                         />
-                        <FieldsRow>
-                            <NumericSelectField
-                                label="Parent Category"
-                                value={newtag.parentId || -1}
-                                options={[{ value: -1, label: "None" }].concat(
-                                    tag.possibleParents.map((p) => ({
-                                        value: p.id as number,
-                                        label: p.name,
-                                    }))
-                                )}
-                                onValue={this.onChooseParent}
-                            />
-                            <div>
-                                <br />
-                                {this.parentTag && (
-                                    <TagBadge
-                                        tag={this.parentTag as DbChartTagJoin}
-                                    />
-                                )}
-                            </div>
-                        </FieldsRow>
                         <div>
                             <input
                                 type="submit"
+                                disabled={!this.isModified || !newtag.name}
                                 className="btn btn-success"
-                                value="Update category"
+                                value="Update tag"
                             />{" "}
                             {tag.datasets.length === 0 &&
                                 tag.children.length === 0 &&
                                 !tag.specialType && (
                                     <button
                                         className="btn btn-danger"
+                                        type="button"
                                         onClick={() => this.deleteTag()}
                                     >
-                                        Delete category
+                                        Delete tag
                                     </button>
                                 )}
                         </div>

diff --git a/adminSiteClient/TagGraphPage.scss b/adminSiteClient/TagGraphPage.scss
@@ -0,0 +1,113 @@
+.TagGraphPage {
+    .page-header {
+        display: flex;
+        justify-content: space-between;
+    }
+    .tag-box {
+        position: relative;
+        padding: 8px;
+        padding-right: 0;
+        background-color: #f0f0f0;
+        transition: box-shadow 0.2s;
+        border-radius: 3px;
+        border: 3px solid transparent;
+        cursor: default;
+        &.tag-box--dragging {
+            z-index: 2;
+            box-shadow: 4px 4px 8px 8px #bbb;
+        }
+
+        &.tag-box--hovering:not(.tag-box--dragging) {
+            border: 3px solid orange;
+        }
+
+        // 🤫
+        & > .tag-box {
+            background-color: #d0d0d0;
+            & > .tag-box {
+                background-color: #f0f0f0;
+                & > .tag-box {
+                    background-color: #d0d0d0;
+                    & > .tag-box {
+                        background-color: #f0f0f0;
+                        & > .tag-box {
+                            background-color: #d0d0d0;
+                            & > .tag-box {
+                                background-color: #f0f0f0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        margin: 4px;
+        .grip-button {
+            position: absolute;
+            right: 4px;
+            top: 8px;
+            width: 32px;
+            height: 32px;
+            background-color: transparent;
+            padding: 0;
+            border: none;
+            line-height: 1;
+            transition: 0.2s;
+            color: #666;
+            &:hover {
+                color: #111;
+            }
+        }
+    }
+    .root-tag-box {
+        padding: 24px 0;
+        cursor: default;
+        > .grip-button {
+            display: none;
+        }
+    }
+    .tag-box__controls-container {
+        margin-bottom: 8px;
+    }
+    .tag-box__weight-control {
+        margin: 0 8px;
+        label {
+            margin: 0;
+            margin-right: 8px;
+        }
+        input {
+            width: 50px;
+            padding-left: 5px;
+            padding-right: 4px;
+            border: none;
+            background-color: transparent;
+            padding-top: 4px;
+            padding-bottom: 5px;
+            margin-right: 0;
+        }
+    }
+    .add-tag-button {
+        margin-right: 8px;
+        background-color: #686868;
+        border-color: #686868;
+        &:hover {
+            background-color: #888;
+            border-color: #888;
+        }
+    }
+    .add-tag-form {
+        display: inline-block;
+        margin-right: 8px;
+    }
+    .add-tag-input {
+        width: 256px;
+        border-radius: 3px;
+    }
+
+    .TagBadge {
+        font-size: 1.1em;
+        font-weight: 500;
+        background: none;
+        border: none;
+    }
+}