feat(web): SVG export

8 files changed, 278 insertions, 55 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 7d5e19d1..685f7cc5 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "//": [
-    "SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>",
+    "SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>",
     "",
     "SPDX-License-Identifier: EPL-2.0"
   ],
@@ -35,8 +35,11 @@
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.24.0",
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
+    "@emotion/serialize": "^1.1.3",
     "@emotion/styled": "^11.11.0",
+    "@emotion/utils": "^1.2.1",
     "@fontsource-variable/jetbrains-mono": "^5.0.19",
     "@fontsource-variable/open-sans": "^5.0.25",
     "@hpcc-js/wasm": "^2.16.0",
diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
index 72ac58fa..cc8b5116 100644
--- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -30,11 +30,13 @@ function DotGraphVisualizer({
   fitZoom,
   transitionTime,
   animateThreshold,
+  setSvgContainer,
 }: {
   graph: GraphStore;
   fitZoom?: FitZoomCallback;
   transitionTime?: number;
   animateThreshold?: number;
+  setSvgContainer?: (container: HTMLElement | undefined) => void;
 }): JSX.Element {
   const transitionTimeOrDefault =
     transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
@@ -48,6 +50,7 @@ function DotGraphVisualizer({
 
   const setElement = useCallback(
     (element: HTMLDivElement | null) => {
+      setSvgContainer?.(element ?? undefined);
       if (disposerRef.current !== undefined) {
         disposerRef.current();
         disposerRef.current = undefined;
@@ -147,6 +150,7 @@ function DotGraphVisualizer({
       transitionTimeOrDefault,
       animateThresholdOrDefault,
       animate,
+      setSvgContainer,
     ],
   );
 
@@ -157,6 +161,7 @@ DotGraphVisualizer.defaultProps = {
   fitZoom: undefined,
   transitionTime: 250,
   animateThreshold: 100,
+  setSvgContainer: undefined,
 };
 
 export default observer(DotGraphVisualizer);
diff --git a/subprojects/frontend/src/graph/ExportButton.tsx b/subprojects/frontend/src/graph/ExportButton.tsx
new file mode 100644
index 00000000..91445d00
--- /dev/null
+++ b/subprojects/frontend/src/graph/ExportButton.tsx
@@ -0,0 +1,168 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import createCache from '@emotion/cache';
+import { serializeStyles } from '@emotion/serialize';
+import type { StyleSheet } from '@emotion/utils';
+import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
+import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
+import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
+import IconButton from '@mui/material/IconButton';
+import { styled, useTheme, type Theme } from '@mui/material/styles';
+import { useCallback } from 'react';
+
+import { createGraphTheme } from './GraphTheme';
+import { SVG_NS } from './postProcessSVG';
+
+const PROLOG = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
+
+const ExportButtonRoot = styled('div', {
+  name: 'ExportButton-Root',
+})(({ theme }) => ({
+  position: 'absolute',
+  padding: theme.spacing(1),
+  top: 0,
+  right: 0,
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+}));
+
+const ICONS: Map<string, Element> = new Map();
+
+function importSVG(svgSource: string, className: string): void {
+  const parser = new DOMParser();
+  const svgDocument = parser.parseFromString(svgSource, 'image/svg+xml');
+  const root = svgDocument.children[0];
+  if (root === undefined) {
+    return;
+  }
+  root.id = className;
+  root.classList.add(className);
+  ICONS.set(className, root);
+}
+
+importSVG(labelSVG, 'icon-TRUE');
+importSVG(labelOutlinedSVG, 'icon-UNKNOWN');
+importSVG(cancelSVG, 'icon-ERROR');
+
+function appendStyles(
+  svgDocument: XMLDocument,
+  svg: SVGSVGElement,
+  theme: Theme,
+): void {
+  const cache = createCache({
+    key: 'refinery',
+    container: svg,
+    prepend: true,
+  });
+  // @ts-expect-error `CSSObject` types don't match up between `@mui/material` and
+  // `@emotion/serialize`, but they are compatible in practice.
+  const styles = serializeStyles([createGraphTheme], cache.registered, {
+    theme,
+    colorNodes: true,
+    noEmbedIcons: true,
+  });
+  const rules: string[] = [];
+  const sheet = {
+    insert(rule) {
+      rules.push(rule);
+    },
+  } as StyleSheet;
+  cache.insert('', styles, sheet, false);
+  const styleElement = svgDocument.createElementNS(SVG_NS, 'style');
+  svg.prepend(styleElement);
+  styleElement.innerHTML = rules.join('');
+}
+
+function fixForeignObjects(svgDocument: XMLDocument, svg: SVGSVGElement): void {
+  const foreignObjects: SVGForeignObjectElement[] = [];
+  svg
+    .querySelectorAll('foreignObject')
+    .forEach((object) => foreignObjects.push(object));
+  foreignObjects.forEach((object) => {
+    const useElement = svgDocument.createElementNS(SVG_NS, 'use');
+    let x = Number(object.getAttribute('x') ?? '0');
+    let y = Number(object.getAttribute('y') ?? '0');
+    const width = Number(object.getAttribute('width') ?? '0');
+    const height = Number(object.getAttribute('height') ?? '0');
+    const size = Math.min(width, height);
+    x += (width - size) / 2;
+    y += (height - size) / 2;
+    useElement.setAttribute('x', String(x));
+    useElement.setAttribute('y', String(y));
+    useElement.setAttribute('width', String(size));
+    useElement.setAttribute('height', String(size));
+    useElement.id = object.id;
+    object.children[0]?.classList?.forEach((className) => {
+      useElement.classList.add(className);
+      if (ICONS.has(className)) {
+        useElement.setAttribute('href', `#${className}`);
+      }
+    });
+    object.replaceWith(useElement);
+  });
+  const defs = svgDocument.createElementNS(SVG_NS, 'defs');
+  svg.prepend(defs);
+  ICONS.forEach((value) => {
+    const importedValue = svgDocument.importNode(value, true);
+    defs.appendChild(importedValue);
+  });
+}
+
+function downloadSVG(svgDocument: XMLDocument) {
+  const serializer = new XMLSerializer();
+  const svgText = `${PROLOG}\n${serializer.serializeToString(svgDocument)}`;
+  const blob = new Blob([svgText], {
+    type: 'image/svg+xml',
+  });
+  const link = document.createElement('a');
+  link.href = window.URL.createObjectURL(blob);
+  link.download = 'graph.svg';
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+export default function ExportButton({
+  svgContainer,
+}: {
+  svgContainer: HTMLElement | undefined;
+}): JSX.Element {
+  const theme = useTheme();
+  const saveCallback = useCallback(() => {
+    const svg = svgContainer?.querySelector('svg');
+    if (!svg) {
+      return;
+    }
+    const svgDocument = document.implementation.createDocument(
+      SVG_NS,
+      'svg',
+      null,
+    );
+    const copyOfSVG = svgDocument.importNode(svg, true);
+    const originalRoot = svgDocument.childNodes[0];
+    if (originalRoot === undefined) {
+      svgDocument.appendChild(copyOfSVG);
+    } else {
+      svgDocument.replaceChild(copyOfSVG, originalRoot);
+    }
+    fixForeignObjects(svgDocument, copyOfSVG);
+    appendStyles(svgDocument, copyOfSVG, theme);
+    downloadSVG(svgDocument);
+  }, [theme, svgContainer]);
+
+  return (
+    <ExportButtonRoot>
+      <IconButton aria-label="Save SVG" onClick={saveCallback}>
+        <SaveAltIcon />
+      </IconButton>
+    </ExportButtonRoot>
+  );
+}
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index d5801b9a..2bf40d1a 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -7,9 +7,11 @@
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import DotGraphVisualizer from './DotGraphVisualizer';
+import ExportButton from './ExportButton';
 import type GraphStore from './GraphStore';
 import VisibilityPanel from './VisibilityPanel';
 import ZoomCanvas from './ZoomCanvas';
@@ -19,6 +21,7 @@ function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
   const { ref, width, height } = useResizeDetector({
     refreshMode: 'debounce',
   });
+  const [svgContainer, setSvgContainer] = useState<HTMLElement | undefined>();
 
   const breakpoint = breakpoints.values.sm;
   const dialog =
@@ -36,9 +39,16 @@ function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
       ref={ref}
     >
       <ZoomCanvas>
-        {(fitZoom) => <DotGraphVisualizer graph={graph} fitZoom={fitZoom} />}
+        {(fitZoom) => (
+          <DotGraphVisualizer
+            graph={graph}
+            fitZoom={fitZoom}
+            setSvgContainer={setSvgContainer}
+          />
+        )}
       </ZoomCanvas>
       <VisibilityPanel graph={graph} dialog={dialog} />
+      <ExportButton svgContainer={svgContainer} />
     </Box>
   );
 }
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
index 7334f559..b3f55a35 100644
--- a/subprojects/frontend/src/graph/GraphTheme.tsx
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -52,11 +52,34 @@ function createTypeHashStyles(theme: Theme, colorNodes: boolean): CSSObject {
   return result;
 }
 
-export default styled('div', {
-  name: 'GraphTheme',
-})<{ colorNodes: boolean }>(({ theme, colorNodes }) => ({
-  '& svg': {
-    userSelect: 'none',
+function iconStyle(
+  svg: string,
+  color: string,
+  noEmbedIcons?: boolean,
+): CSSObject {
+  if (noEmbedIcons) {
+    return {
+      fill: color,
+    };
+  }
+  return {
+    maskImage: svgURL(svg),
+    background: color,
+  };
+}
+
+export function createGraphTheme({
+  theme,
+  colorNodes,
+  noEmbedIcons,
+}: {
+  theme: Theme;
+  colorNodes: boolean;
+  noEmbedIcons?: boolean;
+}): CSSObject {
+  const shadowAlapha = theme.palette.mode === 'dark' ? 0.32 : 0.24;
+
+  return {
     '.node': {
       '& text': {
         fontFamily: theme.typography.fontFamily,
@@ -80,12 +103,15 @@ export default styled('div', {
         strokeWidth: 2,
       },
     },
-    '.node-shadow[fill="white"]': {
-      fill: alpha(
-        theme.palette.text.primary,
-        theme.palette.mode === 'dark' ? 0.32 : 0.24,
-      ),
-    },
+    '.node-shadow[fill="white"]': noEmbedIcons
+      ? {
+          // Inkscape can't handle opacity in exported SVG.
+          fill: theme.palette.text.primary,
+          opacity: shadowAlapha,
+        }
+      : {
+          fill: alpha(theme.palette.text.primary, shadowAlapha),
+        },
     '.node-exists-UNKNOWN [stroke="black"]': {
       strokeDasharray: '5 2',
     },
@@ -104,30 +130,38 @@ export default styled('div', {
     },
     ...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'),
     ...createEdgeColor('ERROR', theme.palette.error.main),
-    '.icon': {
-      maskSize: '12px 12px',
-      maskPosition: '50% 50%',
-      maskRepeat: 'no-repeat',
-      width: '100%',
-      height: '100%',
-    },
-    '.icon-TRUE': {
-      maskImage: svgURL(labelSVG),
-      background: theme.palette.text.primary,
-    },
-    '.icon-UNKNOWN': {
-      maskImage: svgURL(labelOutlinedSVG),
-      background: theme.palette.text.secondary,
-    },
-    '.icon-ERROR': {
-      maskImage: svgURL(cancelSVG),
-      background: theme.palette.error.main,
-    },
+    ...(noEmbedIcons
+      ? {}
+      : {
+          '.icon': {
+            maskSize: '12px 12px',
+            maskPosition: '50% 50%',
+            maskRepeat: 'no-repeat',
+            width: '100%',
+            height: '100%',
+          },
+        }),
+    '.icon-TRUE': iconStyle(labelSVG, theme.palette.text.primary, noEmbedIcons),
+    '.icon-UNKNOWN': iconStyle(
+      labelOutlinedSVG,
+      theme.palette.text.secondary,
+      noEmbedIcons,
+    ),
+    '.icon-ERROR': iconStyle(cancelSVG, theme.palette.error.main, noEmbedIcons),
     'text.label-UNKNOWN': {
       fill: theme.palette.text.secondary,
     },
     'text.label-ERROR': {
       fill: theme.palette.error.main,
     },
+  };
+}
+
+export default styled('div', {
+  name: 'GraphTheme',
+})<{ colorNodes: boolean }>((args) => ({
+  '& svg': {
+    userSelect: 'none',
+    ...createGraphTheme(args),
   },
 }));
diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts
index a580f5c6..f434f80b 100644
--- a/subprojects/frontend/src/graph/postProcessSVG.ts
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -1,13 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
 import { type BBox, parsePolygonBBox, parsePathBBox } from './parseBBox';
 
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export const XLINK_NS = 'http://www.w3.org/1999/xlink';
 
 function modifyAttribute(element: Element, attribute: string, change: number) {
   const valueString = element.getAttribute(attribute);
diff --git a/yarn.lock b/yarn.lock
index c55f95d4..98311d89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -36,12 +36,12 @@ __metadata:
   linkType: hard
 
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.22.5":
-  version: 7.22.13
-  resolution: "@babel/code-frame@npm:7.22.13"
+  version: 7.23.5
+  resolution: "@babel/code-frame@npm:7.23.5"
   dependencies:
-    "@babel/highlight": "npm:^7.22.13"
+    "@babel/highlight": "npm:^7.23.4"
     chalk: "npm:^2.4.2"
-  checksum: 10c0/f4cc8ae1000265677daf4845083b72f88d00d311adb1a93c94eb4b07bf0ed6828a81ae4ac43ee7d476775000b93a28a9cddec18fbdc5796212d8dcccd5de72bd
+  checksum: 10c0/a10e843595ddd9f97faa99917414813c06214f4d9205294013e20c70fbdf4f943760da37dec1d998bf3e6fc20fa2918a47c0e987a7e458663feb7698063ad7c6
   languageName: node
   linkType: hard
 
@@ -211,11 +211,11 @@ __metadata:
   linkType: hard
 
 "@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/helper-module-imports@npm:7.22.5"
+  version: 7.22.15
+  resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
-    "@babel/types": "npm:^7.22.5"
-  checksum: 10c0/04f8c0586c485c33017c63e0fc5fc16bd33b883cef3c88e4b3a8bf7bc807b3f9a7bcb9372fbcc01c0a539a5d1cdb477e7bdec77e250669edab00f796683b6b07
+    "@babel/types": "npm:^7.22.15"
+  checksum: 10c0/4e0d7fc36d02c1b8c8b3006dfbfeedf7a367d3334a04934255de5128115ea0bafdeb3e5736a2559917f0653e4e437400d54542da0468e08d3cbc86d3bbfa8f30
   languageName: node
   linkType: hard
 
@@ -349,14 +349,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.22.13":
-  version: 7.22.20
-  resolution: "@babel/highlight@npm:7.22.20"
+"@babel/highlight@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/highlight@npm:7.23.4"
   dependencies:
     "@babel/helper-validator-identifier": "npm:^7.22.20"
     chalk: "npm:^2.4.2"
     js-tokens: "npm:^4.0.0"
-  checksum: 10c0/f3c3a193afad23434297d88e81d1d6c0c2cf02423de2139ada7ce0a7fc62d8559abf4cc996533c1a9beca7fc990010eb8d544097f75e818ac113bf39ed810aa2
+  checksum: 10c0/fbff9fcb2f5539289c3c097d130e852afd10d89a3a08ac0b5ebebbc055cc84a4bcc3dcfed463d488cde12dd0902ef1858279e31d7349b2e8cee43913744bda33
   languageName: node
   linkType: hard
 
@@ -2002,8 +2002,8 @@ __metadata:
   linkType: hard
 
 "@mui/styled-engine@npm:^5.15.9":
-  version: 5.15.9
-  resolution: "@mui/styled-engine@npm:5.15.9"
+  version: 5.15.11
+  resolution: "@mui/styled-engine@npm:5.15.11"
   dependencies:
     "@babel/runtime": "npm:^7.23.9"
     "@emotion/cache": "npm:^11.11.0"
@@ -2018,7 +2018,7 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: 10c0/47968ec55a5a36936dc8c245c1d62fe9be82bdaba800aeea08d111702b3aea8388bc3c2a46ee4ee315efe77b1c7ecf63308fc518afa69114b2fc90a203de48e0
+  checksum: 10c0/b168565256c82ed34946f954e9088c339917c980451b5dd3d6dca9d36e6d39b5900ea85ffc5736b66d25f841dc761a8c2c70c111c42bec794309f2cafb3975ce
   languageName: node
   linkType: hard
 
@@ -2166,8 +2166,11 @@ __metadata:
     "@codemirror/search": "npm:^6.5.6"
     "@codemirror/state": "npm:^6.4.0"
     "@codemirror/view": "npm:^6.24.0"
+    "@emotion/cache": "npm:^11.11.0"
     "@emotion/react": "npm:^11.11.3"
+    "@emotion/serialize": "npm:^1.1.3"
     "@emotion/styled": "npm:^11.11.0"
+    "@emotion/utils": "npm:^1.2.1"
     "@fontsource-variable/jetbrains-mono": "npm:^5.0.19"
     "@fontsource-variable/open-sans": "npm:^5.0.25"
     "@hpcc-js/wasm": "npm:^2.16.0"
@@ -2966,9 +2969,9 @@ __metadata:
   linkType: hard
 
 "@types/parse-json@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@types/parse-json@npm:4.0.0"
-  checksum: 10c0/1d3012ab2fcdad1ba313e1d065b737578f6506c8958e2a7a5bdbdef517c7e930796cb1599ee067d5dee942fb3a764df64b5eef7e9ae98548d776e86dcffba985
+  version: 4.0.2
+  resolution: "@types/parse-json@npm:4.0.2"
+  checksum: 10c0/b1b863ac34a2c2172fbe0807a1ec4d5cb684e48d422d15ec95980b81475fac4fdb3768a8b13eef39130203a7c04340fc167bae057c7ebcafd7dec9fe6c36aeb1
   languageName: node
   linkType: hard
 
diff --git a/yarn.lock.license b/yarn.lock.license
index 7a5a2a4b..062a2796 100644
--- a/yarn.lock.license
+++ b/yarn.lock.license
@@ -1,3 +1,3 @@
-SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
 
 SPDX-License-Identifier: CC0-1.0