From 652296c19d91405c4c2ad7dc87e61bb0ec5d0c68 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 9 Aug 2024 17:14:38 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20wip=20barebones=20inheritance=20?=
 =?UTF-8?q?tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminSiteClient/AbstractChartEditor.ts   |  1 +
 adminSiteClient/ChartEditor.ts           |  1 +
 adminSiteClient/ChartEditorView.tsx      |  4 ++
 adminSiteClient/EditorHistoryTab.tsx     | 27 +---------
 adminSiteClient/EditorInheritanceTab.tsx | 63 ++++++++++++++++++++++++
 5 files changed, 71 insertions(+), 25 deletions(-)
 create mode 100644 adminSiteClient/EditorInheritanceTab.tsx

diff --git a/adminSiteClient/AbstractChartEditor.ts b/adminSiteClient/AbstractChartEditor.ts
index 0ae51ca9d1f..8a1b08f8bb3 100644
--- a/adminSiteClient/AbstractChartEditor.ts
+++ b/adminSiteClient/AbstractChartEditor.ts
@@ -22,6 +22,7 @@ export type EditorTab =
     | "revisions"
     | "refs"
     | "export"
+    | "inheritance"
 
 export interface AbstractChartEditorManager {
     admin: Admin
diff --git a/adminSiteClient/ChartEditor.ts b/adminSiteClient/ChartEditor.ts
index f5641a7c487..f6b8138db0a 100644
--- a/adminSiteClient/ChartEditor.ts
+++ b/adminSiteClient/ChartEditor.ts
@@ -86,6 +86,7 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
         if (this.grapher.isMarimekko) tabs.push("marimekko")
         tabs.push("revisions")
         tabs.push("refs")
+        if (this.parentConfig) tabs.push("inheritance")
         tabs.push("export")
         return tabs
     }
diff --git a/adminSiteClient/ChartEditorView.tsx b/adminSiteClient/ChartEditorView.tsx
index f3d81531be4..82e0a146ff2 100644
--- a/adminSiteClient/ChartEditorView.tsx
+++ b/adminSiteClient/ChartEditorView.tsx
@@ -35,6 +35,7 @@ import { EditorScatterTab } from "./EditorScatterTab.js"
 import { EditorMapTab } from "./EditorMapTab.js"
 import { EditorHistoryTab } from "./EditorHistoryTab.js"
 import { EditorReferencesTab } from "./EditorReferencesTab.js"
+import { EditorInheritanceTab } from "./EditorInheritanceTab.js"
 import {
     SaveButtonsForChart,
     SaveButtonsForIndicatorChart,
@@ -463,6 +464,9 @@ export class ChartEditorView<
                         {chartEditor && chartEditor.tab === "refs" && (
                             <EditorReferencesTab editor={chartEditor} />
                         )}
+                        {editor.tab === "inheritance" && (
+                            <EditorInheritanceTab editor={editor} />
+                        )}
                         {editor.tab === "export" && (
                             <EditorExportTab editor={editor} />
                         )}
diff --git a/adminSiteClient/EditorHistoryTab.tsx b/adminSiteClient/EditorHistoryTab.tsx
index d9a06c7c8d6..3418c9e2936 100644
--- a/adminSiteClient/EditorHistoryTab.tsx
+++ b/adminSiteClient/EditorHistoryTab.tsx
@@ -3,15 +3,10 @@ import { observer } from "mobx-react"
 import { ChartEditor, Log } from "./ChartEditor.js"
 import { Section, Timeago } from "./Forms.js"
 import { computed, action, observable } from "mobx"
-import {
-    Json,
-    copyToClipboard,
-    diffGrapherConfigs,
-} from "@ourworldindata/utils"
+import { Json, copyToClipboard } from "@ourworldindata/utils"
 import YAML from "yaml"
 import { notification, Modal } from "antd"
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"
-import { defaultGrapherConfig } from "@ourworldindata/grapher"
 
 function LogCompareModal({
     log,
@@ -151,7 +146,7 @@ export class EditorHistoryTab extends React.Component<{ editor: ChartEditor }> {
     }
 
     render() {
-        const { patchConfig, fullConfig, parentConfig } = this.props.editor
+        const { patchConfig, fullConfig } = this.props.editor
         return (
             <div>
                 {this.logs.map((log, i) => (
@@ -182,24 +177,6 @@ export class EditorHistoryTab extends React.Component<{ editor: ChartEditor }> {
                         value={JSON.stringify(patchConfig, undefined, 2)}
                     />
                 </Section>
-                <Section name="Full Config">
-                    <textarea
-                        rows={7}
-                        readOnly
-                        className="form-control"
-                        value={JSON.stringify(fullConfig, undefined, 2)}
-                    />
-                </Section>
-                {parentConfig && (
-                    <Section name="Parent Config">
-                        <textarea
-                            rows={7}
-                            readOnly
-                            className="form-control"
-                            value={JSON.stringify(parentConfig, undefined, 2)}
-                        />
-                    </Section>
-                )}
             </div>
         )
     }
diff --git a/adminSiteClient/EditorInheritanceTab.tsx b/adminSiteClient/EditorInheritanceTab.tsx
new file mode 100644
index 00000000000..8c3e0e6a107
--- /dev/null
+++ b/adminSiteClient/EditorInheritanceTab.tsx
@@ -0,0 +1,63 @@
+import React from "react"
+import { observer } from "mobx-react"
+import { AbstractChartEditor } from "./AbstractChartEditor.js"
+import { Section } from "./Forms.js"
+
+@observer
+export class EditorInheritanceTab<
+    Editor extends AbstractChartEditor,
+> extends React.Component<{ editor: Editor }> {
+    render() {
+        const { parentConfig, fullConfig, grapher } = this.props.editor
+
+        if (!parentConfig)
+            return (
+                <div className="InheritanceTab">
+                    Doesn't inherit settings from any indicator
+                </div>
+            )
+
+        const parentIndicatorId = parentConfig.dimensions?.[0].variableId
+
+        if (!parentIndicatorId)
+            return (
+                <div className="InheritanceTab">
+                    Does inherit settings from any indicator but can't find the
+                    indicator's id (shouldn't happen, please report this bug!)
+                </div>
+            )
+
+        const column = grapher.inputTable.get(parentIndicatorId.toString())
+
+        return (
+            <div className="InheritanceTab">
+                <Section name="Parent indicator">
+                    Inherits settings from indicator{" "}
+                    <a
+                        href={`/admin/variables/${parentIndicatorId}`}
+                        target="_blank"
+                        rel="noopener"
+                    >
+                        {column.name}.
+                    </a>
+                </Section>
+                <Section name="Inherited Config">
+                    <textarea
+                        rows={7}
+                        readOnly
+                        className="form-control"
+                        value={JSON.stringify(parentConfig, undefined, 2)}
+                    />
+                </Section>
+                <Section name="Full Config">
+                    <textarea
+                        rows={7}
+                        readOnly
+                        className="form-control"
+                        value={JSON.stringify(fullConfig, undefined, 2)}
+                    />
+                </Section>
+            </div>
+        )
+    }
+}