Add SVG export!!!!

taxonium_component/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.1",
+    "@headlessui/react": "^1.7.17",
     "@jbrowse/core": "^2.5.0",
     "@jbrowse/plugin-data-management": "^2.5.0",
     "@jbrowse/react-linear-genome-view": "^2.5.0",

taxonium_component/src/Deck.jsx

@@ -178,7 +178,7 @@ function Deck({
     [hoverDetails]
   );
 
-  const { layers, layerFilter, keyStuff } = useLayers({
+  const { layers, layerFilter, keyStuff, triggerSVGdownload } = useLayers({
     data,
     search,
     viewState,
@@ -314,7 +314,8 @@ function Deck({
         // we want this to intercept all mouse events
         // so that we can prevent the default behavior
         // of the browser
-
+        triggerSVGdownload={triggerSVGdownload}
+        deckSize={deckSize}
         zoomReset={zoomReset}
         zoomIncrement={zoomIncrement}
         zoomAxis={zoomAxis}

taxonium_component/src/components/DeckButtons.jsx

@@ -11,22 +11,8 @@ import { TiZoom, TiCog } from "react-icons/ti";
 
 import { MdOutlineZoomOutMap } from "react-icons/md";
 import { ClipLoader } from "react-spinners";
-
-const TaxButton = ({ children, onClick, title }) => {
-  return (
-    <button
-      className=" w-12 h-10 bg-gray-100 p-1 rounded border-gray-300 text-gray-700  opacity-70  hover:opacity-100 mr-1 z-50 mt-auto mb-1
-      shadow-md "
-      onClick={onClick}
-      title={title}
-      style={{
-        pointerEvents: "auto",
-      }}
-    >
-      {children}
-    </button>
-  );
-};
+import TaxButton from "./TaxButton";
+import SnapshotButton from "./SnapshotButton";
 
 export const DeckButtons = ({
   loading,
@@ -37,6 +23,8 @@ export const DeckButtons = ({
   requestOpenSettings,
   zoomReset,
   settings,
+  deckSize,
+  triggerSVGdownload,
 }) => {
   return (
     <div
@@ -116,14 +104,12 @@ export const DeckButtons = ({
         >
           <MdOutlineZoomOutMap className="mx-auto  w-5 h-5 inline-block " />
         </TaxButton>
-        <TaxButton
-          onClick={() => {
-            snapshot();
-          }}
-          title="Take screenshot"
-        >
-          <BiCamera className="mx-auto  w-5 h-5 inline-block" />
-        </TaxButton>
+        <SnapshotButton
+          svgFunction={triggerSVGdownload}
+          pixelFunction={snapshot}
+          deckSize={deckSize}
+        />
+
         <div className="">
           <div>
             <TaxButton

taxonium_component/src/components/SearchPanel.jsx

@@ -340,9 +340,7 @@ function SearchPanel({
           </Select>
         </div>
         {colorBy.colorByField === "genotype" && (
-
           <div className="space-x-2">
-
             <label className="space-x-2">
               <span>Gene</span>
               <Select

taxonium_component/src/components/SnapshotButton.jsx

@@ -0,0 +1,72 @@
+import React, { useState, Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { BiCamera } from "react-icons/bi";
+import TaxButton from "./TaxButton";
+
+const SnapshotButton = ({ svgFunction, pixelFunction, deckSize }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function snapshot(option) {
+    if (option === "pixels") {
+      pixelFunction();
+    } else if (option === "SVG") {
+      svgFunction(deckSize);
+    }
+    setIsOpen(false);
+  }
+
+  return (
+    <>
+      <TaxButton onClick={() => setIsOpen(true)} title="Take screenshot">
+        <BiCamera className="mx-auto w-5 h-5 inline-block" />
+      </TaxButton>
+
+      <Transition.Root show={isOpen} as={Fragment}>
+        <Dialog
+          as="div"
+          static
+          className="fixed inset-0 z-10 overflow-y-auto"
+          open={isOpen}
+          onClose={setIsOpen}
+        >
+          <div className="min-h-screen px-4 text-center">
+            <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+
+            <span
+              className="inline-block h-screen align-middle"
+              aria-hidden="true"
+            >
+              &#8203;
+            </span>
+
+            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
+              <Dialog.Title
+                as="h3"
+                className="text-lg font-medium leading-6 text-gray-900"
+              >
+                Choose format
+              </Dialog.Title>
+
+              <div className="mt-4">
+                <button
+                  onClick={() => snapshot("SVG")}
+                  className="text-blue-600 hover:text-blue-800"
+                >
+                  SVG (vector)
+                </button>
+                <button
+                  onClick={() => snapshot("pixels")}
+                  className="ml-4 text-blue-600 hover:text-blue-800"
+                >
+                  PNG
+                </button>
+              </div>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
+
+export default SnapshotButton;

taxonium_component/src/components/TaxButton.jsx

@@ -0,0 +1,17 @@
+const TaxButton = ({ children, onClick, title }) => {
+  return (
+    <button
+      className=" w-12 h-10 bg-gray-100 p-1 rounded border-gray-300 text-gray-700  opacity-70  hover:opacity-100 mr-1 z-50 mt-auto mb-1
+        shadow-md "
+      onClick={onClick}
+      title={title}
+      style={{
+        pointerEvents: "auto",
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default TaxButton;