diff --git a/adminSiteClient/ChartViewEditor.ts b/adminSiteClient/ChartViewEditor.ts index cca20c2a25e..e67fd8c9d25 100644 --- a/adminSiteClient/ChartViewEditor.ts +++ b/adminSiteClient/ChartViewEditor.ts @@ -28,7 +28,8 @@ export class ChartViewEditor extends AbstractChartEditor if (this.grapher.hasMapTab) tabs.push("map") if (this.grapher.isScatter) tabs.push("scatter") if (this.grapher.isMarimekko) tabs.push("marimekko") - tabs.push("inheritance") + tabs.push("refs") + tabs.push("export") tabs.push("debug") return tabs } diff --git a/adminSiteClient/EditorDebugTab.tsx b/adminSiteClient/EditorDebugTab.tsx index 8495d617d66..0444d5cb2df 100644 --- a/adminSiteClient/EditorDebugTab.tsx +++ b/adminSiteClient/EditorDebugTab.tsx @@ -2,15 +2,21 @@ import React from "react" import { observer } from "mobx-react" import { Section, Toggle } from "./Forms.js" import { ChartEditor, isChartEditorInstance } from "./ChartEditor.js" -import { action } from "mobx" +import { action, computed, observable } from "mobx" import { copyToClipboard, mergeGrapherConfigs } from "@ourworldindata/utils" import YAML from "yaml" -import { notification } from "antd" +import { Modal, notification } from "antd" import { IndicatorChartEditor, isIndicatorChartEditorInstance, } from "./IndicatorChartEditor.js" import { AbstractChartEditor } from "./AbstractChartEditor.js" +import { + ChartViewEditor, + isChartViewEditorInstance, +} from "./ChartViewEditor.js" +import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued" +import { stringify } from "safe-stable-stringify" @observer export class EditorDebugTab< @@ -22,6 +28,8 @@ export class EditorDebugTab< const { editor } = this.props if (isChartEditorInstance(editor)) return + else if (isChartViewEditorInstance(editor)) + return else if (isIndicatorChartEditorInstance(editor)) return else return null @@ -186,6 +194,143 @@ class EditorDebugTabForChart extends React.Component<{ } } +@observer +class EditorDebugTabForChartView extends React.Component<{ + editor: ChartViewEditor +}> { + @action.bound copyYamlToClipboard() { + // Avoid modifying the original JSON object + // Due to mobx memoizing computed values, the JSON can be mutated. + const patchConfig = { + ...this.props.editor.patchConfig, + } + delete patchConfig.id + delete patchConfig.dimensions + delete patchConfig.version + delete patchConfig.isPublished + const chartConfigAsYaml = YAML.stringify(patchConfig) + // Use the Clipboard API to copy the config into the users clipboard + void copyToClipboard(chartConfigAsYaml) + notification["success"]({ + message: "Copied YAML to clipboard", + description: "You can now paste this into the ETL", + placement: "bottomRight", + closeIcon: <>, + }) + } + + @observable diffModalOpen = false + + @action.bound onModalClose() { + this.diffModalOpen = false + } + + @computed get diffModal() { + return ( + +
+ +
+
+ ) + } + + render() { + const { patchConfig, parentConfig, fullConfig, parentChartId } = + this.props.editor + + const parentChartLink = ( + + {parentConfig?.title ?? "(missing title)"} + + ) + + return ( +
+
+