export JSON button

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>
   );
 };

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;