From 2e2ebbf75b12784ac664d864865f01729b3eb8c4 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Thu, 24 Aug 2023 00:06:37 +0200
Subject: refactor(web): clean up graphviz visualization

---
 .../d3-graphviz-npm-5.1.0-ba6bed3fec.patch.license |  14 +
 .../d3-zoom-npm-3.0.0-18f706a421.patch.license     |  11 +
 LICENSES/BSD-3-Clause.txt                          |  11 +
 LICENSES/ISC.txt                                   |   8 +
 .../frontend/config/graphvizUMDVitePlugin.ts       |   6 +
 subprojects/frontend/index.html                    |   2 +-
 subprojects/frontend/package.json                  |   3 +-
 subprojects/frontend/src/TopBar.tsx                |  11 +-
 subprojects/frontend/src/editor/EditorTheme.ts     |   3 +-
 .../frontend/src/graph/DotGraphVisualizer.tsx      | 142 ++++++++
 subprojects/frontend/src/graph/GraphArea.tsx       | 380 +--------------------
 subprojects/frontend/src/graph/GraphPane.tsx       |   2 +-
 subprojects/frontend/src/graph/GraphTheme.tsx      |  64 ++++
 subprojects/frontend/src/graph/ZoomButtons.tsx     |  43 +++
 subprojects/frontend/src/graph/ZoomCanvas.tsx      | 177 ++++++++++
 subprojects/frontend/src/graph/parseBBox.ts        |  68 ++++
 subprojects/frontend/src/graph/postProcessSVG.ts   |  79 +++++
 subprojects/frontend/src/theme/ThemeProvider.tsx   |  10 +-
 subprojects/frontend/vite.config.ts                |   2 +-
 yarn.lock                                          |  24 +-
 20 files changed, 659 insertions(+), 401 deletions(-)
 create mode 100644 .yarn/patches/d3-graphviz-npm-5.1.0-ba6bed3fec.patch.license
 create mode 100644 .yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch.license
 create mode 100644 LICENSES/BSD-3-Clause.txt
 create mode 100644 LICENSES/ISC.txt
 create mode 100644 subprojects/frontend/src/graph/DotGraphVisualizer.tsx
 create mode 100644 subprojects/frontend/src/graph/GraphTheme.tsx
 create mode 100644 subprojects/frontend/src/graph/ZoomButtons.tsx
 create mode 100644 subprojects/frontend/src/graph/ZoomCanvas.tsx
 create mode 100644 subprojects/frontend/src/graph/parseBBox.ts
 create mode 100644 subprojects/frontend/src/graph/postProcessSVG.ts

diff --git a/.yarn/patches/d3-graphviz-npm-5.1.0-ba6bed3fec.patch.license b/.yarn/patches/d3-graphviz-npm-5.1.0-ba6bed3fec.patch.license
new file mode 100644
index 00000000..0c7bddfb
--- /dev/null
+++ b/.yarn/patches/d3-graphviz-npm-5.1.0-ba6bed3fec.patch.license
@@ -0,0 +1,14 @@
+Copyright 2017, Magnus Jacobsson
+Copyright 2023, The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: BSD-3-Clause
+
+This file Incorporates patches from the Refinery authors.
+
+However, but redistribution and use is only permitted if neither
+the name of the copyright holder Magnus Jacobsson nor the names of other
+contributors to the d3-graphviz project are used to endorse or promote
+products derived from this software as per the 3rd clause of the
+3-clause BSD license.
+
+See LICENSES/BSD-3-Clause.txt for more details.
diff --git a/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch.license b/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch.license
new file mode 100644
index 00000000..d95053c1
--- /dev/null
+++ b/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch.license
@@ -0,0 +1,11 @@
+Copyright 2010-2021 Mike Bostock
+Copyright 2020-2023 Philippe Rivière
+Copyright 2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: ISC OR EPL-2.0
+
+This file ncorporates patches from
+https://github.com/d3/d3-zoom/tree/3afbe2ae2dfb3129231c5567db56dafb2d6a56a6
+by Philippe Rivière.
+
+Morevoer, it includes other modifications by the Refinery authors.
diff --git a/LICENSES/BSD-3-Clause.txt b/LICENSES/BSD-3-Clause.txt
new file mode 100644
index 00000000..ea890afb
--- /dev/null
+++ b/LICENSES/BSD-3-Clause.txt
@@ -0,0 +1,11 @@
+Copyright (c) <year> <owner>. 
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/LICENSES/ISC.txt b/LICENSES/ISC.txt
new file mode 100644
index 00000000..b9c199c9
--- /dev/null
+++ b/LICENSES/ISC.txt
@@ -0,0 +1,8 @@
+ISC License:
+
+Copyright (c) 2004-2010 by Internet Systems Consortium, Inc. ("ISC")
+Copyright (c) 1995-2003 by Internet Software Consortium
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND ISC DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL ISC BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/subprojects/frontend/config/graphvizUMDVitePlugin.ts b/subprojects/frontend/config/graphvizUMDVitePlugin.ts
index 7a42560b..9c60a84e 100644
--- a/subprojects/frontend/config/graphvizUMDVitePlugin.ts
+++ b/subprojects/frontend/config/graphvizUMDVitePlugin.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 
diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html
index 1bf3472e..f4b46da2 100644
--- a/subprojects/frontend/index.html
+++ b/subprojects/frontend/index.html
@@ -18,7 +18,7 @@
     <meta name="theme-color" media="(prefers-color-scheme:light)" content="#f5f5f5">
     <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b">
     <style>
-      @import '@fontsource-variable/inter/wght.css';
+      @import '@fontsource-variable/open-sans/wdth.css';
       @import '@fontsource-variable/jetbrains-mono/wght.css';
       @import '@fontsource-variable/jetbrains-mono/wght-italic.css';
     </style>
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 97f6baf6..3ebb1542 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -37,8 +37,8 @@
     "@codemirror/view": "^6.16.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource-variable/inter": "^5.0.8",
     "@fontsource-variable/jetbrains-mono": "^5.0.9",
+    "@fontsource-variable/open-sans": "^5.0.9",
     "@hpcc-js/wasm": "^2.13.1",
     "@lezer/common": "^1.0.3",
     "@lezer/highlight": "^1.1.6",
@@ -53,7 +53,6 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "patch:d3-zoom@npm%3A3.0.0#~/.yarn/patches/d3-zoom-npm-3.0.0-18f706a421.patch",
     "escape-string-regexp": "^5.0.0",
-    "json-stringify-pretty-compact": "^4.0.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4",
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index f2542b14..c722c203 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -124,7 +124,16 @@ export default observer(function TopBar(): JSX.Element {
                 href="https://www.mcgill.ca/ece/daniel-varro"
                 target="_blank"
               >
-                McGill ECE
+                M<span style={{ textTransform: 'none' }}>c</span>Gill ECE
+              </Button>
+              <Button
+                aria-label="Linkönping University, Department of Computer and Information Science"
+                className="rounded"
+                color="inherit"
+                href="https://liu.se/en/employee/danva91"
+                target="_blank"
+              >
+                L<span style={{ textTransform: 'none' }}>i</span>U IDA
               </Button>
               <Button
                 aria-label="2022 Amazon Research Awards recipent"
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index dd551a52..4508273b 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -56,8 +56,9 @@ export default styled('div', {
     '.cm-activeLineGutter': {
       background: 'transparent',
     },
-    '.cm-cursor, .cm-cursor-primary': {
+    '.cm-cursor, .cm-dropCursor, .cm-cursor-primary': {
       borderLeft: `2px solid ${theme.palette.info.main}`,
+      marginLeft: -1,
     },
     '.cm-selectionBackground': {
       background: theme.palette.highlight.selection,
diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
new file mode 100644
index 00000000..7c25488a
--- /dev/null
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -0,0 +1,142 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import * as d3 from 'd3';
+import { type Graphviz, graphviz } from 'd3-graphviz';
+import type { BaseType, Selection } from 'd3-selection';
+import { reaction, type IReactionDisposer } from 'mobx';
+import { useCallback, useRef } from 'react';
+
+import { useRootStore } from '../RootStoreProvider';
+import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
+
+import GraphTheme from './GraphTheme';
+import postProcessSvg from './postProcessSVG';
+
+function toGraphviz(
+  semantics: SemanticsSuccessResult | undefined,
+): string | undefined {
+  if (semantics === undefined) {
+    return undefined;
+  }
+  const lines = [
+    'digraph {',
+    'graph [bgcolor=transparent];',
+    `node [fontsize=12, shape=plain, fontname="OpenSans"];`,
+    'edge [fontsize=10.5, color=black, fontname="OpenSans"];',
+  ];
+  const nodeIds = semantics.nodes.map((name, i) => name ?? `n${i}`);
+  lines.push(
+    ...nodeIds.map(
+      (id, i) =>
+        `n${i} [id="${id}", label=<<table border="1" cellborder="0" cellspacing="0" cellpadding="4.5" style="rounded" bgcolor="green"><tr><td>${id}</td></tr><hr/><tr><td bgcolor="white">node</td></tr></table>>];`,
+    ),
+  );
+  Object.keys(semantics.partialInterpretation).forEach((relation) => {
+    if (relation === 'builtin::equals' || relation === 'builtin::contains') {
+      return;
+    }
+    const tuples = semantics.partialInterpretation[relation];
+    if (tuples === undefined) {
+      return;
+    }
+    const first = tuples[0];
+    if (first === undefined || first.length !== 3) {
+      return;
+    }
+    const nameFragments = relation.split('::');
+    const simpleName = nameFragments[nameFragments.length - 1] ?? relation;
+    lines.push(
+      ...tuples.map(([from, to, value]) => {
+        if (
+          typeof from !== 'number' ||
+          typeof to !== 'number' ||
+          typeof value !== 'string'
+        ) {
+          return '';
+        }
+        const isUnknown = value === 'UNKNOWN';
+        return `n${from} -> n${to} [
+            id="${nodeIds[from]},${nodeIds[to]},${relation}",
+            xlabel="${simpleName}",
+            style="${isUnknown ? 'dashed' : 'solid'}",
+            class="edge-${value}"
+          ];`;
+      }),
+    );
+  });
+  lines.push('}');
+  return lines.join('\n');
+}
+
+export default function DotGraphVisualizer(): JSX.Element {
+  const { editorStore } = useRootStore();
+  const disposerRef = useRef<IReactionDisposer | undefined>();
+  const graphvizRef = useRef<
+    Graphviz<BaseType, unknown, null, undefined> | undefined
+  >();
+
+  const setElement = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (disposerRef.current !== undefined) {
+        disposerRef.current();
+        disposerRef.current = undefined;
+      }
+      if (graphvizRef.current !== undefined) {
+        // `@types/d3-graphviz` does not contain the signature for the `destroy` method.
+        (graphvizRef.current as unknown as { destroy(): void }).destroy();
+        graphvizRef.current = undefined;
+      }
+      if (element !== null) {
+        element.replaceChildren();
+        const renderer = graphviz(element) as Graphviz<
+          BaseType,
+          unknown,
+          null,
+          undefined
+        >;
+        renderer.keyMode('id');
+        renderer.zoom(false);
+        renderer.tweenPrecision('5%');
+        renderer.tweenShapes(false);
+        renderer.convertEqualSidedPolygons(false);
+        const transition = () =>
+          d3.transition().duration(300).ease(d3.easeCubic);
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument,
+          @typescript-eslint/no-explicit-any --
+          Workaround for error in `@types/d3-graphviz`.
+        */
+        renderer.transition(transition as any);
+        renderer.on(
+          'postProcessSVG',
+          // @ts-expect-error Custom `d3-graphviz` hook not covered by typings.
+          (
+            svgSelection: Selection<SVGSVGElement, unknown, BaseType, unknown>,
+          ) => {
+            const svg = svgSelection.node();
+            if (svg !== null) {
+              postProcessSvg(svg);
+            }
+          },
+        );
+        disposerRef.current = reaction(
+          () => editorStore?.semantics,
+          (semantics) => {
+            const str = toGraphviz(semantics);
+            if (str !== undefined) {
+              renderer.renderDot(str);
+            }
+          },
+          { fireImmediately: true },
+        );
+        graphvizRef.current = renderer;
+      }
+    },
+    [editorStore],
+  );
+
+  return <GraphTheme ref={setElement} />;
+}
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index 6ca3bc87..32147d92 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -1,384 +1,16 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import AddIcon from '@mui/icons-material/Add';
-import CropFreeIcon from '@mui/icons-material/CropFree';
-import RemoveIcon from '@mui/icons-material/Remove';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import { useTheme } from '@mui/material/styles';
-import { CSSProperties } from '@mui/material/styles/createTypography';
-import * as d3 from 'd3';
-import { type Graphviz, graphviz } from 'd3-graphviz';
-import type { BaseType, Selection } from 'd3-selection';
-import { zoom as d3Zoom } from 'd3-zoom';
-import { reaction, type IReactionDisposer } from 'mobx';
-import { useCallback, useRef, useState } from 'react';
-
-import { useRootStore } from '../RootStoreProvider';
-import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults';
-
-function toGraphviz(
-  semantics: SemanticsSuccessResult | undefined,
-): string | undefined {
-  if (semantics === undefined) {
-    return undefined;
-  }
-  const lines = [
-    'digraph {',
-    'graph [bgcolor=transparent];',
-    'node [fontsize=16, shape=plain];',
-    'edge [fontsize=12, color=black];',
-  ];
-  const nodeIds = semantics.nodes.map((name, i) => name ?? `n${i}`);
-  lines.push(
-    ...nodeIds.map(
-      (id, i) =>
-        `n${i} [id="${id}", label=<<table border="1" cellborder="0" cellspacing="0" cellpadding="4" style="rounded" bgcolor="green"><tr><td>${id}</td></tr><hr/><tr><td bgcolor="white">node</td></tr></table>>];`,
-    ),
-  );
-  Object.keys(semantics.partialInterpretation).forEach((relation) => {
-    if (relation === 'builtin::equals' || relation === 'builtin::contains') {
-      return;
-    }
-    const tuples = semantics.partialInterpretation[relation];
-    if (tuples === undefined) {
-      return;
-    }
-    const first = tuples[0];
-    if (first === undefined || first.length !== 3) {
-      return;
-    }
-    const nameFragments = relation.split('::');
-    const simpleName = nameFragments[nameFragments.length - 1] ?? relation;
-    lines.push(
-      ...tuples.map(([from, to, value]) => {
-        if (
-          typeof from !== 'number' ||
-          typeof to !== 'number' ||
-          typeof value !== 'string'
-        ) {
-          return '';
-        }
-        const isUnknown = value === 'UNKNOWN';
-        return `n${from} -> n${to} [
-            id="${nodeIds[from]},${nodeIds[to]},${relation}",
-            xlabel="${simpleName}",
-            style="${isUnknown ? 'dashed' : 'solid'}",
-            class="edge-${value}"
-          ];`;
-      }),
-    );
-  });
-  lines.push('}');
-  return lines.join('\n');
-}
-
-interface Transform {
-  x: number;
-  y: number;
-  k: number;
-}
+import DotGraphVisualizer from './DotGraphVisualizer';
+import ZoomCanvas from './ZoomCanvas';
 
 export default function GraphArea(): JSX.Element {
-  const { editorStore } = useRootStore();
-  const theme = useTheme();
-  const disposerRef = useRef<IReactionDisposer | undefined>();
-  const graphvizRef = useRef<
-    Graphviz<BaseType, unknown, null, undefined> | undefined
-  >();
-  const canvasRef = useRef<HTMLDivElement | undefined>();
-  const elementRef = useRef<HTMLDivElement | undefined>();
-  const zoomRef = useRef<
-    d3.ZoomBehavior<HTMLDivElement, unknown> | undefined
-  >();
-  const [zoom, setZoom] = useState<Transform>({ x: 0, y: 0, k: 1 });
-
-  const setCanvas = useCallback((element: HTMLDivElement | null) => {
-    canvasRef.current = element ?? undefined;
-    if (element === null) {
-      return;
-    }
-    const zoomBehavior = d3Zoom<HTMLDivElement, unknown>();
-    // `@types/d3-zoom` does not contain the `center` function, because it is
-    // only available as a pull request for `d3-zoom`.
-    (
-      zoomBehavior as unknown as {
-        center(callback: (event: MouseEvent) => [number, number]): unknown;
-      }
-    ).center((event: MouseEvent | Touch) => {
-      const { width, height } = element.getBoundingClientRect();
-      const [x, y] = d3.pointer(event, element);
-      return [x - width / 2, y - height / 2];
-    });
-    // Custom `centroid` method added via patch.
-    (
-      zoomBehavior as unknown as {
-        centroid(centroid: [number, number]): unknown;
-      }
-    ).centroid([0, 0]);
-    zoomBehavior.on('zoom', (event: d3.D3ZoomEvent<HTMLDivElement, unknown>) =>
-      setZoom(event.transform),
-    );
-    d3.select(element).call(zoomBehavior);
-    zoomRef.current = zoomBehavior;
-  }, []);
-
-  const setElement = useCallback(
-    (element: HTMLDivElement | null) => {
-      elementRef.current = element ?? undefined;
-      if (disposerRef.current !== undefined) {
-        disposerRef.current();
-        disposerRef.current = undefined;
-      }
-      if (graphvizRef.current !== undefined) {
-        // `@types/d3-graphviz` does not contain the signature for the `destroy` method.
-        (graphvizRef.current as unknown as { destroy(): void }).destroy();
-        graphvizRef.current = undefined;
-      }
-      if (element !== null) {
-        element.replaceChildren();
-        const renderer = graphviz(element) as Graphviz<
-          BaseType,
-          unknown,
-          null,
-          undefined
-        >;
-        renderer.keyMode('id');
-        renderer.zoom(false);
-        renderer.tweenPrecision('5%');
-        renderer.tweenShapes(false);
-        renderer.convertEqualSidedPolygons(false);
-        const transition = () =>
-          d3.transition().duration(300).ease(d3.easeCubic);
-        /* eslint-disable-next-line @typescript-eslint/no-unsafe-argument,
-          @typescript-eslint/no-explicit-any --
-          Workaround for error in `@types/d3-graphviz`.
-        */
-        renderer.transition(transition as any);
-        renderer.on(
-          'postProcessSVG',
-          // @ts-expect-error Custom `d3-graphviz` hook not covered by typings.
-          (
-            svgSelection: Selection<SVGSVGElement, unknown, BaseType, unknown>,
-          ) => {
-            svgSelection.selectAll('title').remove();
-            const svg = svgSelection.node();
-            if (svg === null) {
-              return;
-            }
-            svg.querySelectorAll('.node').forEach((node) => {
-              node.querySelectorAll('path').forEach((path) => {
-                const d = path.getAttribute('d') ?? '';
-                const points = d.split(/[A-Z ]/);
-                points.shift();
-                const x = points.map((p) => {
-                  return Number(p.split(',')[0] ?? 0);
-                });
-                const y = points.map((p) => {
-                  return Number(p.split(',')[1] ?? 0);
-                });
-                const xmin = Math.min.apply(null, x);
-                const xmax = Math.max.apply(null, x);
-                const ymin = Math.min.apply(null, y);
-                const ymax = Math.max.apply(null, y);
-                const rect = document.createElementNS(
-                  'http://www.w3.org/2000/svg',
-                  'rect',
-                );
-                rect.setAttribute('fill', path.getAttribute('fill') ?? '');
-                rect.setAttribute('stroke', path.getAttribute('stroke') ?? '');
-                rect.setAttribute('x', String(xmin));
-                rect.setAttribute('y', String(ymin));
-                rect.setAttribute('width', String(xmax - xmin));
-                rect.setAttribute('height', String(ymax - ymin));
-                rect.setAttribute('height', String(ymax - ymin));
-                rect.setAttribute('rx', '8');
-                rect.setAttribute('ry', '8');
-                node.replaceChild(rect, path);
-              });
-            });
-          },
-        );
-        disposerRef.current = reaction(
-          () => editorStore?.semantics,
-          (semantics) => {
-            const str = toGraphviz(semantics);
-            if (str !== undefined) {
-              renderer.renderDot(str);
-            }
-          },
-          { fireImmediately: true },
-        );
-        graphvizRef.current = renderer;
-      }
-    },
-    [editorStore],
-  );
-
-  const changeZoom = useCallback((event: React.MouseEvent, factor: number) => {
-    if (canvasRef.current === undefined || zoomRef.current === undefined) {
-      return;
-    }
-    const selection = d3.select(canvasRef.current);
-    const zoomTransition = selection.transition().duration(250);
-    const center: [number, number] = [0, 0];
-    zoomRef.current.scaleBy(zoomTransition, factor, center);
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-
-  const fitZoom = useCallback((event: React.MouseEvent) => {
-    if (
-      canvasRef.current === undefined ||
-      zoomRef.current === undefined ||
-      elementRef.current === undefined
-    ) {
-      return;
-    }
-    const { width: canvasWidth, height: canvasHeight } =
-      canvasRef.current.getBoundingClientRect();
-    const { width: scaledWidth, height: scaledHeight } =
-      elementRef.current.getBoundingClientRect();
-    const currentFactor = d3.zoomTransform(canvasRef.current).k;
-    const width = scaledWidth / currentFactor;
-    const height = scaledHeight / currentFactor;
-    if (width > 0 && height > 0) {
-      const factor = Math.min(
-        1.0,
-        (canvasWidth - 64) / width,
-        (canvasHeight - 64) / height,
-      );
-      const selection = d3.select(canvasRef.current);
-      const zoomTransition = selection.transition().duration(250);
-      zoomRef.current.transform(zoomTransition, d3.zoomIdentity.scale(factor));
-    }
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-
   return (
-    <Box
-      sx={{
-        width: '100%',
-        height: '100%',
-        position: 'relative',
-        overflow: 'hidden',
-      }}
-    >
-      <Box
-        sx={{
-          position: 'absolute',
-          overflow: 'hidden',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-        ref={setCanvas}
-      >
-        <Box
-          sx={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: `
-              translate(${zoom.x}px, ${zoom.y}px)
-              scale(${zoom.k})
-              translate(-50%, -50%)
-            `,
-            transformOrigin: '0 0',
-            '& svg': {
-              userSelect: 'none',
-              '& .node': {
-                '& text': {
-                  ...(theme.typography.body2 as Omit<
-                    CSSProperties,
-                    '@font-face'
-                  >),
-                  fill: theme.palette.text.primary,
-                },
-                '& [stroke="black"]': {
-                  stroke: theme.palette.text.primary,
-                },
-                '& [fill="green"]': {
-                  fill:
-                    theme.palette.mode === 'dark'
-                      ? theme.palette.primary.dark
-                      : theme.palette.primary.light,
-                },
-                '& [fill="white"]': {
-                  fill: theme.palette.background.default,
-                  stroke: theme.palette.background.default,
-                },
-              },
-              '& .edge': {
-                '& text': {
-                  ...(theme.typography.caption as Omit<
-                    CSSProperties,
-                    '@font-face'
-                  >),
-                  fill: theme.palette.text.primary,
-                },
-                '& [stroke="black"]': {
-                  stroke: theme.palette.text.primary,
-                },
-                '& [fill="black"]': {
-                  fill: theme.palette.text.primary,
-                },
-              },
-              '& .edge-UNKNOWN': {
-                '& text': {
-                  fill: theme.palette.text.secondary,
-                },
-                '& [stroke="black"]': {
-                  stroke: theme.palette.text.secondary,
-                },
-                '& [fill="black"]': {
-                  fill: theme.palette.text.secondary,
-                },
-              },
-              '& .edge-ERROR': {
-                '& text': {
-                  fill: theme.palette.error.main,
-                },
-                '& [stroke="black"]': {
-                  stroke: theme.palette.error.main,
-                },
-                '& [fill="black"]': {
-                  fill: theme.palette.error.main,
-                },
-              },
-            },
-          }}
-          ref={setElement}
-        />
-      </Box>
-      <Stack
-        direction="column"
-        p={1}
-        sx={{ position: 'absolute', bottom: 0, right: 0 }}
-      >
-        <IconButton
-          aria-label="Zoom in"
-          onClick={(event) => changeZoom(event, 2)}
-        >
-          <AddIcon fontSize="small" />
-        </IconButton>
-        <IconButton
-          aria-label="Zoom out"
-          onClick={(event) => changeZoom(event, 0.5)}
-        >
-          <RemoveIcon fontSize="small" />
-        </IconButton>
-        <IconButton aria-label="Fit screen" onClick={fitZoom}>
-          <CropFreeIcon fontSize="small" />
-        </IconButton>
-      </Stack>
-    </Box>
+    <ZoomCanvas>
+      <DotGraphVisualizer />
+    </ZoomCanvas>
   );
 }
diff --git a/subprojects/frontend/src/graph/GraphPane.tsx b/subprojects/frontend/src/graph/GraphPane.tsx
index f04b9931..c2ef8927 100644
--- a/subprojects/frontend/src/graph/GraphPane.tsx
+++ b/subprojects/frontend/src/graph/GraphPane.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
new file mode 100644
index 00000000..41ba6ba5
--- /dev/null
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { styled, type CSSObject } from '@mui/material/styles';
+
+function createEdgeColor(suffix: string, color: string): CSSObject {
+  return {
+    [`& .edge-${suffix}`]: {
+      '& text': {
+        fill: color,
+      },
+      '& [stroke="black"]': {
+        stroke: color,
+      },
+      '& [fill="black"]': {
+        fill: color,
+      },
+    },
+  };
+}
+
+export default styled('div', {
+  name: 'GraphTheme',
+})(({ theme }) => ({
+  '& svg': {
+    userSelect: 'none',
+    '& .node': {
+      '& text': {
+        fontFamily: theme.typography.fontFamily,
+        fill: theme.palette.text.primary,
+      },
+      '& [stroke="black"]': {
+        stroke: theme.palette.text.primary,
+      },
+      '& [fill="green"]': {
+        fill:
+          theme.palette.mode === 'dark'
+            ? theme.palette.primary.dark
+            : theme.palette.primary.light,
+      },
+      '& [fill="white"]': {
+        fill: theme.palette.background.default,
+        stroke: theme.palette.background.default,
+      },
+    },
+    '& .edge': {
+      '& text': {
+        fontFamily: theme.typography.fontFamily,
+        fill: theme.palette.text.primary,
+      },
+      '& [stroke="black"]': {
+        stroke: theme.palette.text.primary,
+      },
+      '& [fill="black"]': {
+        fill: theme.palette.text.primary,
+      },
+    },
+    ...createEdgeColor('UNKNOWN', theme.palette.text.secondary),
+    ...createEdgeColor('ERROR', theme.palette.error.main),
+  },
+}));
diff --git a/subprojects/frontend/src/graph/ZoomButtons.tsx b/subprojects/frontend/src/graph/ZoomButtons.tsx
new file mode 100644
index 00000000..72f54774
--- /dev/null
+++ b/subprojects/frontend/src/graph/ZoomButtons.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import AddIcon from '@mui/icons-material/Add';
+import CropFreeIcon from '@mui/icons-material/CropFree';
+import RemoveIcon from '@mui/icons-material/Remove';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+
+export default function ZoomButtons({
+  changeZoom,
+  fitZoom,
+}: {
+  changeZoom: (event: React.MouseEvent, factor: number) => void;
+  fitZoom: (event: React.MouseEvent) => void;
+}): JSX.Element {
+  return (
+    <Stack
+      direction="column"
+      p={1}
+      sx={{ position: 'absolute', bottom: 0, right: 0 }}
+    >
+      <IconButton
+        aria-label="Zoom in"
+        onClick={(event) => changeZoom(event, 2)}
+      >
+        <AddIcon fontSize="small" />
+      </IconButton>
+      <IconButton
+        aria-label="Zoom out"
+        onClick={(event) => changeZoom(event, 0.5)}
+      >
+        <RemoveIcon fontSize="small" />
+      </IconButton>
+      <IconButton aria-label="Fit screen" onClick={fitZoom}>
+        <CropFreeIcon fontSize="small" />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/subprojects/frontend/src/graph/ZoomCanvas.tsx b/subprojects/frontend/src/graph/ZoomCanvas.tsx
new file mode 100644
index 00000000..eb3e9285
--- /dev/null
+++ b/subprojects/frontend/src/graph/ZoomCanvas.tsx
@@ -0,0 +1,177 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Box from '@mui/material/Box';
+import * as d3 from 'd3';
+import { zoom as d3Zoom } from 'd3-zoom';
+import React, { useCallback, useRef, useState } from 'react';
+
+import ZoomButtons from './ZoomButtons';
+
+declare module 'd3-zoom' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Redeclaring type parameters.
+  interface ZoomBehavior<ZoomRefElement extends Element, Datum> {
+    // `@types/d3-zoom` does not contain the `center` function, because it is
+    // only available as a pull request for `d3-zoom`.
+    center(callback: (event: MouseEvent | Touch) => [number, number]): this;
+
+    // Custom `centroid` method added via patch.
+    centroid(centroid: [number, number]): this;
+  }
+}
+
+interface Transform {
+  x: number;
+  y: number;
+  k: number;
+}
+
+export default function ZoomCanvas({
+  children,
+  fitPadding,
+  transitionTime,
+}: {
+  children?: React.ReactNode;
+  fitPadding?: number;
+  transitionTime?: number;
+}): JSX.Element {
+  const canvasRef = useRef<HTMLDivElement | undefined>();
+  const elementRef = useRef<HTMLDivElement | undefined>();
+  const zoomRef = useRef<
+    d3.ZoomBehavior<HTMLDivElement, unknown> | undefined
+  >();
+  const fitPaddingOrDefault = fitPadding ?? ZoomCanvas.defaultProps.fitPadding;
+  const transitionTimeOrDefault =
+    transitionTime ?? ZoomCanvas.defaultProps.transitionTime;
+
+  const [zoom, setZoom] = useState<Transform>({ x: 0, y: 0, k: 1 });
+
+  const setCanvas = useCallback(
+    (canvas: HTMLDivElement | null) => {
+      canvasRef.current = canvas ?? undefined;
+      if (canvas === null) {
+        return;
+      }
+      const zoomBehavior = d3Zoom<HTMLDivElement, unknown>()
+        .duration(transitionTimeOrDefault)
+        .center((event) => {
+          const { width, height } = canvas.getBoundingClientRect();
+          const [x, y] = d3.pointer(event, canvas);
+          return [x - width / 2, y - height / 2];
+        })
+        .centroid([0, 0]);
+      zoomBehavior.on(
+        'zoom',
+        (event: d3.D3ZoomEvent<HTMLDivElement, unknown>) =>
+          setZoom(event.transform),
+      );
+      d3.select(canvas).call(zoomBehavior);
+      zoomRef.current = zoomBehavior;
+    },
+    [transitionTimeOrDefault],
+  );
+
+  const makeTransition = useCallback(
+    (element: HTMLDivElement) =>
+      d3.select(element).transition().duration(transitionTimeOrDefault),
+    [transitionTimeOrDefault],
+  );
+
+  const changeZoom = useCallback(
+    (event: React.MouseEvent, factor: number) => {
+      if (canvasRef.current === undefined || zoomRef.current === undefined) {
+        return;
+      }
+      const zoomTransition = makeTransition(canvasRef.current);
+      const center: [number, number] = [0, 0];
+      zoomRef.current.scaleBy(zoomTransition, factor, center);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [makeTransition],
+  );
+
+  const fitZoom = useCallback(
+    (event: React.MouseEvent) => {
+      if (
+        canvasRef.current === undefined ||
+        zoomRef.current === undefined ||
+        elementRef.current === undefined
+      ) {
+        return;
+      }
+      const { width: canvasWidth, height: canvasHeight } =
+        canvasRef.current.getBoundingClientRect();
+      const { width: scaledWidth, height: scaledHeight } =
+        elementRef.current.getBoundingClientRect();
+      const currentFactor = d3.zoomTransform(canvasRef.current).k;
+      const width = scaledWidth / currentFactor;
+      const height = scaledHeight / currentFactor;
+      if (width > 0 && height > 0) {
+        const factor = Math.min(
+          1.0,
+          (canvasWidth - fitPaddingOrDefault) / width,
+          (canvasHeight - fitPaddingOrDefault) / height,
+        );
+        const zoomTransition = makeTransition(canvasRef.current);
+        zoomRef.current.transform(
+          zoomTransition,
+          d3.zoomIdentity.scale(factor),
+        );
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [fitPaddingOrDefault, makeTransition],
+  );
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          overflow: 'hidden',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+        ref={setCanvas}
+      >
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: `
+              translate(${zoom.x}px, ${zoom.y}px)
+              scale(${zoom.k})
+              translate(-50%, -50%)
+            `,
+            transformOrigin: '0 0',
+          }}
+          ref={elementRef}
+        >
+          {children}
+        </Box>
+      </Box>
+      <ZoomButtons changeZoom={changeZoom} fitZoom={fitZoom} />
+    </Box>
+  );
+}
+
+ZoomCanvas.defaultProps = {
+  children: undefined,
+  fitPadding: 64,
+  transitionTime: 250,
+};
diff --git a/subprojects/frontend/src/graph/parseBBox.ts b/subprojects/frontend/src/graph/parseBBox.ts
new file mode 100644
index 00000000..9806cbca
--- /dev/null
+++ b/subprojects/frontend/src/graph/parseBBox.ts
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2017, Magnus Jacobsson
+ * Copyright 2023, The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause AND EPL-2.0
+ *
+ * This file Incorporates patches from the Refinery authors.
+ *
+ * Redistribution and use is only permitted if neither
+ * the name of the copyright holder Magnus Jacobsson nor the names of other
+ * contributors to the d3-graphviz project are used to endorse or promote
+ * products derived from this software as per the 3rd clause of the
+ * 3-clause BSD license.
+ *
+ * See LICENSES/BSD-3-Clause.txt for more details.
+ */
+
+export interface BBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+function parsePoints(points: string[]): BBox {
+  const x = points.map((p) => Number(p.split(',')[0] ?? 0));
+  const y = points.map((p) => Number(p.split(',')[1] ?? 0));
+  const xmin = Math.min.apply(null, x);
+  const xmax = Math.max.apply(null, x);
+  const ymin = Math.min.apply(null, y);
+  const ymax = Math.max.apply(null, y);
+  return {
+    x: xmin,
+    y: ymin,
+    width: xmax - xmin,
+    height: ymax - ymin,
+  };
+}
+
+/**
+ * Compute the bounding box of a polygon without adding it to the DOM.
+ *
+ * Copyed from
+ * https://github.com/magjac/d3-graphviz/blob/81ab523fe5189a90da2d9d9cc9015c7079eea780/src/element.js#L36-L53
+ *
+ * @param path The polygon to compute the bounding box of.
+ * @returns The computed bounding box.
+ */
+export function parsePolygonBBox(polygon: SVGPolygonElement): BBox {
+  const points = (polygon.getAttribute('points') ?? '').split(' ');
+  return parsePoints(points);
+}
+
+/**
+ * Compute the bounding box of a path without adding it to the DOM.
+ *
+ * Copyed from
+ * https://github.com/magjac/d3-graphviz/blob/81ab523fe5189a90da2d9d9cc9015c7079eea780/src/element.js#L56-L75
+ *
+ * @param path The path to compute the bounding box of.
+ * @returns The computed bounding box.
+ */
+export function parsePathBBox(path: SVGPathElement): BBox {
+  const d = path.getAttribute('d') ?? '';
+  const points = d.split(/[A-Z ]/);
+  points.shift();
+  return parsePoints(points);
+}
diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts
new file mode 100644
index 00000000..59cc15b9
--- /dev/null
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -0,0 +1,79 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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';
+
+function clipCompartmentBackground(node: SVGGElement) {
+  // Background rectangle of the node created by the `<table bgcolor="green">`
+  // HTML element in dot. It was transformed into a rounded rect by `fixNodeBackground`.
+  const container = node.querySelector<SVGRectElement>('rect[fill="green"]');
+  // Background rectangle of the lower compartment created by the `<td bgcolor="white">`
+  // HTML element in dot. It was transformed into a rounded rect by `fixNodeBackground`.
+  // Since dot doesn't round the coners of `<td>` background,
+  // we have to clip it ourselves.
+  const compartment = node.querySelector<SVGPolygonElement>(
+    'polygon[fill="white"]',
+  );
+  if (container === null || compartment === null) {
+    return;
+  }
+  const copyOfContainer = container.cloneNode() as SVGRectElement;
+  const clipPath = document.createElementNS(SVG_NS, 'clipPath');
+  const clipId = `${node.id},,clip`;
+  clipPath.setAttribute('id', clipId);
+  clipPath.appendChild(copyOfContainer);
+  node.appendChild(clipPath);
+  compartment.setAttribute('clip-path', `url(#${clipId})`);
+}
+
+function createRect(
+  { x, y, width, height }: BBox,
+  original: SVGElement,
+): SVGRectElement {
+  const rect = document.createElementNS(SVG_NS, 'rect');
+  rect.setAttribute('fill', original.getAttribute('fill') ?? '');
+  rect.setAttribute('stroke', original.getAttribute('stroke') ?? '');
+  rect.setAttribute('x', String(x));
+  rect.setAttribute('y', String(y));
+  rect.setAttribute('width', String(width));
+  rect.setAttribute('height', String(height));
+  return rect;
+}
+
+function optimizeNodeShapes(node: SVGGElement) {
+  node.querySelectorAll('path').forEach((path) => {
+    const bbox = parsePathBBox(path);
+    const rect = createRect(bbox, path);
+    rect.setAttribute('rx', '12');
+    rect.setAttribute('ry', '12');
+    node.replaceChild(rect, path);
+  });
+  node.querySelectorAll('polygon').forEach((polygon) => {
+    const bbox = parsePolygonBBox(polygon);
+    if (bbox.height === 0) {
+      const polyline = document.createElementNS(SVG_NS, 'polyline');
+      polyline.setAttribute('stroke', polygon.getAttribute('stroke') ?? '');
+      polyline.setAttribute(
+        'points',
+        `${bbox.x},${bbox.y} ${bbox.x + bbox.width},${bbox.y}`,
+      );
+      node.replaceChild(polyline, polygon);
+    } else {
+      const rect = createRect(bbox, polygon);
+      node.replaceChild(rect, polygon);
+    }
+  });
+  clipCompartmentBackground(node);
+}
+
+export default function postProcessSvg(svg: SVGSVGElement) {
+  svg
+    .querySelectorAll<SVGTitleElement>('title')
+    .forEach((title) => title.parentNode?.removeChild(title));
+  svg.querySelectorAll<SVGGElement>('g.node').forEach(optimizeNodeShapes);
+}
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 78146f25..90fea897 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -75,13 +75,15 @@ function createResponsiveTheme(
     ...options,
     typography: {
       fontFamily:
-        '"Inter Variable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeightMedium: 600,
+        '"Open Sans Variable", "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif',
+      fontWeightMedium: 500,
       fontWeightEditorNormal: 400,
       fontWeightEditorBold: 700,
       button: {
-        // 24px line height for 14px button text to fix browser rounding errors.
-        lineHeight: 1.714286,
+        fontWeight: 600,
+        fontVariationSettings: '"wdth" 87.5',
+        fontSize: '1rem',
+        lineHeight: 1.5,
       },
       editor: {
         fontFamily:
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index 5bda8071..82e432de 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -30,7 +30,7 @@ const { mode, isDevelopment, devModePlugins, serverOptions } =
 process.env['NODE_ENV'] ??= mode;
 
 const fontsGlob = [
-  'inter-latin-wght-normal-*.woff2',
+  'open-sans-latin-wdth-normal-*.woff2',
   'jetbrains-mono-latin-wght-{normal,italic}-*.woff2',
 ];
 
diff --git a/yarn.lock b/yarn.lock
index ca10e7c7..59835487 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1708,13 +1708,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fontsource-variable/inter@npm:^5.0.8":
-  version: 5.0.8
-  resolution: "@fontsource-variable/inter@npm:5.0.8"
-  checksum: 74175d6051584d7b50410eefc5d454de5ff96d809aeaf6ae46ff4c7f2b04f2d412025ac241cd7a082f93d7456b644e324eeb7089418bd9e39800d92e33ac3225
-  languageName: node
-  linkType: hard
-
 "@fontsource-variable/jetbrains-mono@npm:^5.0.9":
   version: 5.0.9
   resolution: "@fontsource-variable/jetbrains-mono@npm:5.0.9"
@@ -1722,6 +1715,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource-variable/open-sans@npm:^5.0.9":
+  version: 5.0.9
+  resolution: "@fontsource-variable/open-sans@npm:5.0.9"
+  checksum: 320f4dfa3ed58e42d3f3b895fd620d8d4f1eff0226b05273a18edf50dcb3617ceb6bc00827db72c83904c665bde163130a9374b3756706e775ecefb34d22d89c
+  languageName: node
+  linkType: hard
+
 "@hpcc-js/wasm@npm:2.13.1, @hpcc-js/wasm@npm:^2.13.1":
   version: 2.13.1
   resolution: "@hpcc-js/wasm@npm:2.13.1"
@@ -2117,8 +2117,8 @@ __metadata:
     "@codemirror/view": "npm:^6.16.0"
     "@emotion/react": "npm:^11.11.1"
     "@emotion/styled": "npm:^11.11.0"
-    "@fontsource-variable/inter": "npm:^5.0.8"
     "@fontsource-variable/jetbrains-mono": "npm:^5.0.9"
+    "@fontsource-variable/open-sans": "npm:^5.0.9"
     "@hpcc-js/wasm": "npm:^2.13.1"
     "@lezer/common": "npm:^1.0.3"
     "@lezer/generator": "npm:^1.4.0"
@@ -2165,7 +2165,6 @@ __metadata:
     eslint-plugin-react: "npm:^7.33.1"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     html-minifier-terser: "npm:^7.2.0"
-    json-stringify-pretty-compact: "npm:^4.0.0"
     lodash-es: "npm:^4.17.21"
     loglevel: "npm:^1.8.1"
     loglevel-plugin-prefix: "npm:^0.8.4"
@@ -5977,13 +5976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-stringify-pretty-compact@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "json-stringify-pretty-compact@npm:4.0.0"
-  checksum: 505781b4be7c72047ae8dfa667b520d20461ceac451b6516cb8ac5e12a758fbd7491d99d5e3f7e60423ce9d26ed4e4bcaccab3420bf651298901635c849017cf
-  languageName: node
-  linkType: hard
-
 "json5@npm:^1.0.2":
   version: 1.0.2
   resolution: "json5@npm:1.0.2"
-- 
cgit v1.2.3-54-g00ecf