✨ Add wizard link for chart animation (#4407)

* Co-authored-by: Marcel Gerber <[email protected]> * add chart type explicitly * refactor: conditionally render chart animation link for published graphs * refactor: remove commented-out code for chart animation tab
owid · Jan 9, 2025 · c6f6cd5 · c6f6cd5
1 parent 83b0f95
commit c6f6cd5
Showing 1 changed file with 46 additions and 5 deletions.
diff --git a/adminSiteClient/EditorExportTab.tsx b/adminSiteClient/EditorExportTab.tsx
@@ -8,6 +8,10 @@ import {
     GrapherStaticFormat,
 } from "@ourworldindata/utils"
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
+import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
+import { faHatWizard, faDownload } from "@fortawesome/free-solid-svg-icons"
+import { Button } from "antd"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
 type ExportSettings = Required<
     Pick<
@@ -227,6 +231,18 @@ export class EditorExportTab<
     }
 
     render() {
+        const chartAnimationUrl = new URL(`${ETL_WIZARD_URL}chart-animation`)
+        if (this.grapher.canonicalUrl)
+            chartAnimationUrl.searchParams.set(
+                "animation_chart_url",
+                this.grapher.canonicalUrl
+            )
+        chartAnimationUrl.searchParams.set("animation_skip_button", "True")
+        // chartAnimationUrl.searchParams.set(
+        //     "animation_chart_tab",
+        //     this.grapher.tab ?? ""
+        // )
+
         return (
             <div className="EditorExportTab">
                 <Section name="Displayed elements">
@@ -309,40 +325,65 @@ export class EditorExportTab<
                         />
                     )}
                 </Section>
+
                 <Section name="Export static chart">
                     <div className="DownloadButtons">
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadDesktopPNG}
                         >
-                            Download Desktop PNG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Desktop PNG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadDesktopSVG}
                         >
-                            Download Desktop SVG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Desktop SVG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadMobilePNG}
                         >
-                            Download Mobile PNG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Mobile PNG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadMobileSVG}
                         >
-                            Download Mobile SVG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Mobile SVG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadMobileSVGForSocialMedia}
                         >
-                            Download Mobile SVG for Social Media
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Mobile SVG for Social Media
                         </button>
                     </div>
                 </Section>
+
+                {/* Link to Wizard dataset preview */}
+                {this.grapher.isPublished && (
+                    <Section name="Animate chart">
+                        <a
+                            href={chartAnimationUrl.toString()}
+                            target="_blank"
+                            className="btn btn-tertiary"
+                            rel="noopener"
+                        >
+                            <Button
+                                type="default"
+                                icon={<FontAwesomeIcon icon={faHatWizard} />}
+                            >
+                                Animate with Wizard
+                            </Button>
+                        </a>
+                    </Section>
+                )}
             </div>
         )
     }