From 3b752469361b232ba06d22e0dfb679d9803fe5e6 Mon Sep 17 00:00:00 2001
From: Theodor Guttesen <theodorguttesen@gmail.com>
Date: Mon, 12 Aug 2024 10:42:46 +0200
Subject: [PATCH] export JSON button

---
 .../components/scene/info-view/InfoView.tsx   |  2 ++
 .../export-json-button/ExportJSONButton.tsx   | 33 +++++++++++++++++++
 .../export-json-button/export-json-button.css |  0
 3 files changed, 35 insertions(+)
 create mode 100644 tools/Python/mcdisplay/webgl/components/scene/info-view/export-json-button/ExportJSONButton.tsx
 create mode 100644 tools/Python/mcdisplay/webgl/components/scene/info-view/export-json-button/export-json-button.css

diff --git a/tools/Python/mcdisplay/webgl/components/scene/info-view/InfoView.tsx b/tools/Python/mcdisplay/webgl/components/scene/info-view/InfoView.tsx
index 85bbf7e5ce..b9d825989d 100644
--- a/tools/Python/mcdisplay/webgl/components/scene/info-view/InfoView.tsx
+++ b/tools/Python/mcdisplay/webgl/components/scene/info-view/InfoView.tsx
@@ -3,6 +3,7 @@ import "../../../common.css";
 import "./info-view.css";
 import { useInstrumentContext } from "../../../Contexts/InstrumentContext";
 import { useRaysContext } from "../../../Contexts/RaysContext";
+import ExportJSONButton from "./export-json-button/ExportJSONButton";
 
 const InfoView = () => {
   const { instrument, setInstrument } = useInstrumentContext();
@@ -53,6 +54,7 @@ const InfoView = () => {
           {rays.vmin}
         </p>
       ) : null}
+      <ExportJSONButton />
     </div>
   );
 };
diff --git a/tools/Python/mcdisplay/webgl/components/scene/info-view/export-json-button/ExportJSONButton.tsx b/tools/Python/mcdisplay/webgl/components/scene/info-view/export-json-button/ExportJSONButton.tsx
new file mode 100644
index 0000000000..77ea3d801a
--- /dev/null
+++ b/tools/Python/mcdisplay/webgl/components/scene/info-view/export-json-button/ExportJSONButton.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import "../../../../common.css";
+import "./export-json-button.css";
+import { useInstrumentContext } from "../../../../Contexts/InstrumentContext";
+
+const ExportJSONButton = () => {
+  const { instrument, setInstrument } = useInstrumentContext();
+
+  const handleButtonClick = () => {
+    const comps = instrument.components;
+    let element = document.createElement("a");
+    element.setAttribute(
+      "href",
+      "data:text/plain;charset=utf-8," +
+        encodeURIComponent(JSON.stringify(comps, null, 2))
+    );
+    element.setAttribute("download", "components.json");
+    element.style.display = "none";
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+  };
+
+  return (
+    <div id="export-json-button" className="">
+      <button onClick={handleButtonClick}>Export JSON</button>
+    </div>
+  );
+};
+
+export default ExportJSONButton;
diff --git a/tools/Python/mcdisplay/webgl/components/scene/info-view/export-json-button/export-json-button.css b/tools/Python/mcdisplay/webgl/components/scene/info-view/export-json-button/export-json-button.css
new file mode 100644
index 0000000000..e69de29bb2