13 files changed, 1896 insertions, 0 deletions
diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
new file mode 100644
index 00000000..eec72a7d
--- /dev/null
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -0,0 +1,162 @@
+/*
+ * 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 { observer } from 'mobx-react-lite';
+import { useCallback, useRef, useState } from 'react';
+import getLogger from '../utils/getLogger';
+import type GraphStore from './GraphStore';
+import GraphTheme from './GraphTheme';
+import { FitZoomCallback } from './ZoomCanvas';
+import dotSource from './dotSource';
+import postProcessSvg from './postProcessSVG';
+const LOG = getLogger('graph.DotGraphVisualizer');
+function ptToPx(pt: number): number {
+  return (pt * 4) / 3;
+}
+function DotGraphVisualizer({
+  graph,
+  fitZoom,
+  transitionTime,
+  animateThreshold,
+}: {
+  graph: GraphStore;
+  fitZoom?: FitZoomCallback;
+  transitionTime?: number;
+  animateThreshold?: number;
+}): JSX.Element {
+  const transitionTimeOrDefault =
+    transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
+  const animateThresholdOrDefault =
+    animateThreshold ?? DotGraphVisualizer.defaultProps.animateThreshold;
+  const disposerRef = useRef<IReactionDisposer | undefined>();
+  const graphvizRef = useRef<
+    Graphviz<BaseType, unknown, null, undefined> | undefined
+  >();
+  const [animate, setAnimate] = useState(true);
+  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');
+        ['TRUE', 'UNKNOWN', 'ERROR'].forEach((icon) =>
+          renderer.addImage(`#${icon}`, 16, 16),
+        );
+        renderer.zoom(false);
+        renderer.tweenPrecision('5%');
+        renderer.tweenShapes(false);
+        renderer.convertEqualSidedPolygons(false);
+        if (animate) {
+          const transition = () =>
+            d3
+              .transition()
+              .duration(transitionTimeOrDefault)
+              .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);
+        } else {
+          renderer.tweenPaths(false);
+        }
+        let newViewBox = { width: 0, height: 0 };
+        renderer.onerror(LOG.error.bind(LOG));
+        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);
+              newViewBox = {
+                width: ptToPx(svg.viewBox.baseVal.width),
+                height: ptToPx(svg.viewBox.baseVal.height),
+              };
+            } else {
+              // Do not trigger fit zoom.
+              newViewBox = { width: 0, height: 0 };
+            }
+          },
+        );
+        renderer.on('renderEnd', () => {
+          // `d3-graphviz` uses `<title>` elements for traceability,
+          // so we only remove them after the rendering is finished.
+          d3.select(element).selectAll('title').remove();
+        });
+        if (fitZoom !== undefined) {
+          if (animate) {
+            renderer.on('transitionStart', () => fitZoom(newViewBox));
+          } else {
+            renderer.on('end', () => fitZoom(false));
+          }
+        }
+        disposerRef.current = reaction(
+          () => dotSource(graph),
+          (result) => {
+            if (result === undefined) {
+              return;
+            }
+            const [source, size] = result;
+            // Disable tweening for large graphs to improve performance.
+            // See https://github.com/magjac/d3-graphviz/issues/232#issuecomment-1157555213
+            const newAnimate = size < animateThresholdOrDefault;
+            if (animate === newAnimate) {
+              renderer.renderDot(source);
+            } else {
+              setAnimate(newAnimate);
+            }
+          },
+          { fireImmediately: true },
+        );
+        graphvizRef.current = renderer;
+      }
+    },
+    [
+      graph,
+      fitZoom,
+      transitionTimeOrDefault,
+      animateThresholdOrDefault,
+      animate,
+    ],
+  );
+  return <GraphTheme ref={setElement} />;
+}
+DotGraphVisualizer.defaultProps = {
+  fitZoom: undefined,
+  transitionTime: 250,
+  animateThreshold: 100,
+};
+export default observer(DotGraphVisualizer);
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
new file mode 100644
index 00000000..f8f40d22
--- /dev/null
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import { useResizeDetector } from 'react-resize-detector';
+import Loading from '../Loading';
+import { useRootStore } from '../RootStoreProvider';
+import DotGraphVisualizer from './DotGraphVisualizer';
+import VisibilityPanel from './VisibilityPanel';
+import ZoomCanvas from './ZoomCanvas';
+function GraphArea(): JSX.Element {
+  const { editorStore } = useRootStore();
+  const { breakpoints } = useTheme();
+  const { ref, width, height } = useResizeDetector({
+    refreshMode: 'debounce',
+  });
+  if (editorStore === undefined) {
+    return <Loading />;
+  }
+  const { graph } = editorStore;
+  const breakpoint = breakpoints.values.sm;
+  const dialog =
+    width === undefined ||
+    height === undefined ||
+    width < breakpoint ||
+    height < breakpoint;
+  return (
+    <Box
+      width="100%"
+      height="100%"
+      overflow="hidden"
+      position="relative"
+      ref={ref}
+    >
+      <ZoomCanvas>
+        {(fitZoom) => <DotGraphVisualizer graph={graph} fitZoom={fitZoom} />}
+      </ZoomCanvas>
+      <VisibilityPanel graph={graph} dialog={dialog} />
+    </Box>
+  );
+}
+export default observer(GraphArea);
diff --git a/subprojects/frontend/src/graph/GraphPane.tsx b/subprojects/frontend/src/graph/GraphPane.tsx
new file mode 100644
index 00000000..c2ef8927
--- /dev/null
+++ b/subprojects/frontend/src/graph/GraphPane.tsx
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import Stack from '@mui/material/Stack';
+import { Suspense, lazy } from 'react';
+import Loading from '../Loading';
+const GraphArea = lazy(() => import('./GraphArea'));
+export default function GraphPane(): JSX.Element {
+  return (
+    <Stack
+      direction="column"
+      height="100%"
+      overflow="auto"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Suspense fallback={<Loading />}>
+        <GraphArea />
+      </Suspense>
+    </Stack>
+  );
+}
diff --git a/subprojects/frontend/src/graph/GraphStore.ts b/subprojects/frontend/src/graph/GraphStore.ts
new file mode 100644
index 00000000..ecb016b5
--- /dev/null
+++ b/subprojects/frontend/src/graph/GraphStore.ts
@@ -0,0 +1,187 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import { makeAutoObservable, observable } from 'mobx';
+import type {
+  RelationMetadata,
+  SemanticsSuccessResult,
+} from '../xtext/xtextServiceResults';
+export type Visibility = 'all' | 'must' | 'none';
+export function getDefaultVisibility(
+  metadata: RelationMetadata | undefined,
+): Visibility {
+  if (metadata === undefined || metadata.arity <= 0 || metadata.arity > 2) {
+    return 'none';
+  }
+  const { detail } = metadata;
+  switch (detail.type) {
+    case 'class':
+    case 'reference':
+    case 'opposite':
+      return 'all';
+    case 'predicate':
+      return detail.error ? 'must' : 'none';
+    default:
+      return 'none';
+  }
+}
+export function isVisibilityAllowed(
+  metadata: RelationMetadata | undefined,
+  visibility: Visibility,
+): boolean {
+  if (metadata === undefined || metadata.arity <= 0 || metadata.arity > 2) {
+    return visibility === 'none';
+  }
+  const { detail } = metadata;
+  if (detail.type === 'predicate' && detail.error) {
+    // We can't display may matches of error predicates,
+    // because they have none by definition.
+    return visibility !== 'all';
+  }
+  return true;
+}
+export default class GraphStore {
+  semantics: SemanticsSuccessResult = {
+    nodes: [],
+    relations: [],
+    partialInterpretation: {},
+  };
+  relationMetadata = new Map<string, RelationMetadata>();
+  visibility = new Map<string, Visibility>();
+  abbreviate = true;
+  scopes = false;
+  selectedSymbol: RelationMetadata | undefined;
+  constructor() {
+    makeAutoObservable(this, {
+      semantics: observable.ref,
+    });
+  }
+  getVisibility(relation: string): Visibility {
+    const visibilityOverride = this.visibility.get(relation);
+    if (visibilityOverride !== undefined) {
+      return visibilityOverride;
+    }
+    return this.getDefaultVisibility(relation);
+  }
+  getDefaultVisibility(relation: string): Visibility {
+    const metadata = this.relationMetadata.get(relation);
+    return getDefaultVisibility(metadata);
+  }
+  isVisibilityAllowed(relation: string, visibility: Visibility): boolean {
+    const metadata = this.relationMetadata.get(relation);
+    return isVisibilityAllowed(metadata, visibility);
+  }
+  setVisibility(relation: string, visibility: Visibility): void {
+    const metadata = this.relationMetadata.get(relation);
+    if (metadata === undefined || !isVisibilityAllowed(metadata, visibility)) {
+      return;
+    }
+    const defaultVisiblity = getDefaultVisibility(metadata);
+    if (defaultVisiblity === visibility) {
+      this.visibility.delete(relation);
+    } else {
+      this.visibility.set(relation, visibility);
+    }
+  }
+  cycleVisibility(relation: string): void {
+    const metadata = this.relationMetadata.get(relation);
+    if (metadata === undefined) {
+      return;
+    }
+    switch (this.getVisibility(relation)) {
+      case 'none':
+        if (isVisibilityAllowed(metadata, 'must')) {
+          this.setVisibility(relation, 'must');
+        }
+        break;
+      case 'must':
+        {
+          const next = isVisibilityAllowed(metadata, 'all') ? 'all' : 'none';
+          this.setVisibility(relation, next);
+        }
+        break;
+      default:
+        this.setVisibility(relation, 'none');
+        break;
+    }
+  }
+  hideAll(): void {
+    this.relationMetadata.forEach((metadata, name) => {
+      if (getDefaultVisibility(metadata) === 'none') {
+        this.visibility.delete(name);
+      } else {
+        this.visibility.set(name, 'none');
+      }
+    });
+  }
+  resetFilter(): void {
+    this.visibility.clear();
+  }
+  getName({ name, simpleName }: { name: string; simpleName: string }): string {
+    return this.abbreviate ? simpleName : name;
+  }
+  toggleAbbrevaite(): void {
+    this.abbreviate = !this.abbreviate;
+  }
+  toggleScopes(): void {
+    this.scopes = !this.scopes;
+  }
+  setSelectedSymbol(option: RelationMetadata | undefined): void {
+    if (option === undefined) {
+      this.selectedSymbol = undefined;
+      return;
+    }
+    const metadata = this.relationMetadata.get(option.name);
+    if (metadata !== undefined) {
+      this.selectedSymbol = metadata;
+    } else {
+      this.selectedSymbol = undefined;
+    }
+  }
+  setSemantics(semantics: SemanticsSuccessResult) {
+    this.semantics = semantics;
+    this.relationMetadata.clear();
+    this.semantics.relations.forEach((metadata) => {
+      this.relationMetadata.set(metadata.name, metadata);
+    });
+    const toRemove = new Set<string>();
+    this.visibility.forEach((value, key) => {
+      if (
+        !this.isVisibilityAllowed(key, value) ||
+        this.getDefaultVisibility(key) === value
+      ) {
+        toRemove.add(key);
+      }
+    });
+    toRemove.forEach((key) => {
+      this.visibility.delete(key);
+    });
+    this.setSelectedSymbol(this.selectedSymbol);
+  }
+}
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
new file mode 100644
index 00000000..989bd0c2
--- /dev/null
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -0,0 +1,120 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+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 { alpha, styled, type CSSObject } from '@mui/material/styles';
+import svgURL from '../utils/svgURL';
+function createEdgeColor(
+  suffix: string,
+  stroke: string,
+  fill?: string,
+): CSSObject {
+  return {
+    [`.edge-${suffix}`]: {
+      '& text': {
+        fill: stroke,
+      },
+      '& [stroke="black"]': {
+        stroke,
+      },
+      '& [fill="black"]': {
+        fill: fill ?? stroke,
+      },
+    },
+  };
+}
+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,
+      },
+    },
+    '.node-INDIVIDUAL': {
+      '& [stroke="black"]': {
+        strokeWidth: 2,
+      },
+    },
+    '.node-shadow[fill="white"]': {
+      fill: alpha(
+        theme.palette.text.primary,
+        theme.palette.mode === 'dark' ? 0.32 : 0.24,
+      ),
+    },
+    '.node-exists-UNKNOWN [stroke="black"]': {
+      strokeDasharray: '5 2',
+    },
+    '.node-exists-FALSE': {
+      '& [fill="green"]': {
+        fill: theme.palette.background.default,
+      },
+      '& [stroke="black"]': {
+        strokeDasharray: '1 3',
+        stroke: theme.palette.text.secondary,
+      },
+    },
+    '.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, '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,
+    },
+    'text.label-UNKNOWN': {
+      fill: theme.palette.text.secondary,
+    },
+    'text.label-ERROR': {
+      fill: theme.palette.error.main,
+    },
+  },
+}));
diff --git a/subprojects/frontend/src/graph/RelationName.tsx b/subprojects/frontend/src/graph/RelationName.tsx
new file mode 100644
index 00000000..ec26fb21
--- /dev/null
+++ b/subprojects/frontend/src/graph/RelationName.tsx
@@ -0,0 +1,72 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import { styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import { RelationMetadata } from '../xtext/xtextServiceResults';
+const Error = styled('span', {
+  name: 'RelationName-Error',
+})(({ theme }) => ({
+  color: theme.palette.error.main,
+}));
+const Qualifier = styled('span', {
+  name: 'RelationName-Qualifier',
+})(({ theme }) => ({
+  color: theme.palette.text.secondary,
+}));
+const FormattedName = observer(function FormattedName({
+  name,
+  metadata,
+}: {
+  name: string;
+  metadata: RelationMetadata;
+}): React.ReactNode {
+  const { detail } = metadata;
+  if (detail.type === 'class' && detail.abstractClass) {
+    return <i>{name}</i>;
+  }
+  if (detail.type === 'reference' && detail.containment) {
+    return <b>{name}</b>;
+  }
+  if (detail.type === 'predicate' && detail.error) {
+    return <Error>{name}</Error>;
+  }
+  return name;
+});
+function RelationName({
+  metadata,
+  abbreviate,
+}: {
+  metadata: RelationMetadata;
+  abbreviate?: boolean;
+}): JSX.Element {
+  const { name, simpleName } = metadata;
+  if (abbreviate ?? RelationName.defaultProps.abbreviate) {
+    return <FormattedName name={simpleName} metadata={metadata} />;
+  }
+  if (name.endsWith(simpleName)) {
+    return (
+      <>
+        <Qualifier>
+          {name.substring(0, name.length - simpleName.length)}
+        </Qualifier>
+        <FormattedName name={simpleName} metadata={metadata} />
+      </>
+    );
+  }
+  return <FormattedName name={name} metadata={metadata} />;
+}
+RelationName.defaultProps = {
+  abbreviate: false,
+};
+export default observer(RelationName);
diff --git a/subprojects/frontend/src/graph/VisibilityDialog.tsx b/subprojects/frontend/src/graph/VisibilityDialog.tsx
new file mode 100644
index 00000000..f1fef28b
--- /dev/null
+++ b/subprojects/frontend/src/graph/VisibilityDialog.tsx
@@ -0,0 +1,315 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import CloseIcon from '@mui/icons-material/Close';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import LabelIcon from '@mui/icons-material/Label';
+import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined';
+import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import type GraphStore from './GraphStore';
+import { isVisibilityAllowed } from './GraphStore';
+import RelationName from './RelationName';
+const VisibilityDialogRoot = styled('div', {
+  name: 'VisibilityDialog-Root',
+  shouldForwardProp: (propName) => propName !== 'dialog',
+})<{ dialog: boolean }>(({ theme, dialog }) => {
+  const overlayOpacity = dialog ? 0.16 : 0.09;
+  return {
+    maxHeight: '100%',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    '.VisibilityDialog-title': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      '& h2': {
+        flexGrow: 1,
+      },
+      '.MuiIconButton-root': {
+        flexGrow: 0,
+        flexShrink: 0,
+        marginLeft: theme.spacing(2),
+      },
+    },
+    '.MuiFormControlLabel-root': {
+      marginLeft: 0,
+      paddingTop: theme.spacing(1),
+      paddingLeft: theme.spacing(1),
+      '& + .MuiFormControlLabel-root': {
+        paddingTop: 0,
+      },
+    },
+    '.VisibilityDialog-scroll': {
+      display: 'flex',
+      flexDirection: 'column',
+      height: 'auto',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      margin: `0 ${theme.spacing(2)}`,
+      '& table': {
+        // We use flexbox instead of `display: table` to get proper text-overflow
+        // behavior for overly long relation names.
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      '& thead, & tbody': {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      '& thead': {
+        position: 'sticky',
+        top: 0,
+        zIndex: 999,
+        backgroundColor: theme.palette.background.paper,
+        ...(theme.palette.mode === 'dark'
+          ? {
+              // In dark mode, MUI Paper gets a lighter overlay.
+              backgroundImage: `linear-gradient(
+                rgba(255, 255, 255, ${overlayOpacity}),
+                rgba(255, 255, 255, ${overlayOpacity})
+              )`,
+            }
+          : {}),
+        '& tr': {
+          height: '44px',
+        },
+      },
+      '& tr': {
+        display: 'flex',
+        flexDirection: 'row',
+        maxWidth: '100%',
+      },
+      '& tbody tr': {
+        transition: theme.transitions.create('background', {
+          duration: theme.transitions.duration.shortest,
+        }),
+        '&:hover': {
+          background: theme.palette.action.hover,
+          '@media (hover: none)': {
+            background: 'transparent',
+          },
+        },
+      },
+      '& th, & td': {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        // Set width in advance, since we can't rely on `display: table-cell`.
+        width: '44px',
+      },
+      '& th:nth-of-type(3), & td:nth-of-type(3)': {
+        justifyContent: 'start',
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(2),
+        // Only let the last column grow or shrink.
+        flexGrow: 1,
+        flexShrink: 1,
+        // Compute the maximum available space in advance to let the text overflow.
+        maxWidth: 'calc(100% - 88px)',
+        width: 'min-content',
+      },
+      '& td:nth-of-type(3)': {
+        cursor: 'pointer',
+        userSelect: 'none',
+        WebkitTapHighlightColor: 'transparent',
+      },
+      '& thead th, .VisibilityDialog-custom tr:last-child td': {
+        borderBottom: `1px solid ${theme.palette.divider}`,
+      },
+    },
+    // Hack to apply `text-overflow`.
+    '.VisibilityDialog-nowrap': {
+      maxWidth: '100%',
+      overflow: 'hidden',
+      wordWrap: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    '.VisibilityDialog-buttons': {
+      padding: theme.spacing(1),
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      ...(dialog
+        ? {
+            marginTop: theme.spacing(1),
+            borderTop: `1px solid ${theme.palette.divider}`,
+          }
+        : {}),
+    },
+    '.VisibilityDialog-empty': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      color: theme.palette.text.secondary,
+    },
+    '.VisibilityDialog-emptyIcon': {
+      fontSize: '6rem',
+      marginBottom: theme.spacing(1),
+    },
+  };
+});
+function VisibilityDialog({
+  graph,
+  close,
+  dialog,
+}: {
+  graph: GraphStore;
+  close: () => void;
+  dialog?: boolean;
+}): JSX.Element {
+  const titleId = useId();
+  const builtinRows: JSX.Element[] = [];
+  const rows: JSX.Element[] = [];
+  graph.relationMetadata.forEach((metadata, name) => {
+    if (!isVisibilityAllowed(metadata, 'must')) {
+      return;
+    }
+    const visibility = graph.getVisibility(name);
+    const row = (
+      <tr key={metadata.name}>
+        <td>
+          <Checkbox
+            checked={visibility !== 'none'}
+            aria-label={`Show true and error values of ${metadata.simpleName}`}
+            onClick={() =>
+              graph.setVisibility(name, visibility === 'none' ? 'must' : 'none')
+            }
+          />
+        </td>
+        <td>
+          <Checkbox
+            checked={visibility === 'all'}
+            disabled={!isVisibilityAllowed(metadata, 'all')}
+            aria-label={`Show all values of ${metadata.simpleName}`}
+            onClick={() =>
+              graph.setVisibility(name, visibility === 'all' ? 'must' : 'all')
+            }
+          />
+        </td>
+        <td onClick={() => graph.cycleVisibility(name)}>
+          <div className="VisibilityDialog-nowrap">
+            <RelationName metadata={metadata} abbreviate={graph.abbreviate} />
+          </div>
+        </td>
+      </tr>
+    );
+    if (name.startsWith('builtin::')) {
+      builtinRows.push(row);
+    } else {
+      rows.push(row);
+    }
+  });
+  const hasRows = rows.length > 0 || builtinRows.length > 0;
+  return (
+    <VisibilityDialogRoot
+      dialog={dialog ?? VisibilityDialog.defaultProps.dialog}
+      aria-labelledby={dialog ? titleId : undefined}
+    >
+      {dialog && (
+        <div className="VisibilityDialog-title">
+          <Typography variant="h6" component="h2" id={titleId}>
+            Customize view
+          </Typography>
+          <IconButton aria-label="Close" onClick={close}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+      )}
+      <FormControlLabel
+        control={
+          <Switch
+            checked={!graph.abbreviate}
+            onClick={() => graph.toggleAbbrevaite()}
+          />
+        }
+        label="Fully qualified names"
+      />
+      <FormControlLabel
+        control={
+          <Switch checked={graph.scopes} onClick={() => graph.toggleScopes()} />
+        }
+        label="Object scopes"
+      />
+      <div className="VisibilityDialog-scroll">
+        {hasRows ? (
+          <table cellSpacing={0}>
+            <thead>
+              <tr>
+                <th>
+                  <LabelIcon />
+                </th>
+                <th>
+                  <LabelOutlinedIcon />
+                </th>
+                <th>Symbol</th>
+              </tr>
+            </thead>
+            <tbody className="VisibilityDialog-custom">{...rows}</tbody>
+            <tbody className="VisibilityDialog-builtin">{...builtinRows}</tbody>
+          </table>
+        ) : (
+          <div className="VisibilityDialog-empty">
+            <SentimentVeryDissatisfiedIcon
+              className="VisibilityDialog-emptyIcon"
+              fontSize="inherit"
+            />
+            <div>Partial model is empty</div>
+          </div>
+        )}
+      </div>
+      <div className="VisibilityDialog-buttons">
+        <Button
+          color="inherit"
+          onClick={() => graph.hideAll()}
+          startIcon={<VisibilityOffIcon />}
+        >
+          Hide all
+        </Button>
+        <Button
+          color="inherit"
+          onClick={() => graph.resetFilter()}
+          startIcon={<FilterListIcon />}
+        >
+          Reset filter
+        </Button>
+        {!dialog && (
+          <Button color="inherit" onClick={close}>
+            Close
+          </Button>
+        )}
+      </div>
+    </VisibilityDialogRoot>
+  );
+}
+VisibilityDialog.defaultProps = {
+  dialog: false,
+};
+export default observer(VisibilityDialog);
diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx
new file mode 100644
index 00000000..20c4ffca
--- /dev/null
+++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx
@@ -0,0 +1,91 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import TuneIcon from '@mui/icons-material/Tune';
+import Badge from '@mui/material/Badge';
+import Dialog from '@mui/material/Dialog';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Slide from '@mui/material/Slide';
+import { styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useId, useState } from 'react';
+import type GraphStore from './GraphStore';
+import VisibilityDialog from './VisibilityDialog';
+const VisibilityPanelRoot = styled('div', {
+  name: 'VisibilityPanel-Root',
+})(({ theme }) => ({
+  position: 'absolute',
+  padding: theme.spacing(1),
+  top: 0,
+  left: 0,
+  maxHeight: '100%',
+  maxWidth: '100%',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  '.VisibilityPanel-drawer': {
+    overflow: 'hidden',
+    display: 'flex',
+    maxWidth: '100%',
+    margin: theme.spacing(1),
+  },
+}));
+function VisibilityPanel({
+  graph,
+  dialog,
+}: {
+  graph: GraphStore;
+  dialog: boolean;
+}): JSX.Element {
+  const id = useId();
+  const [showFilter, setShowFilter] = useState(false);
+  const close = useCallback(() => setShowFilter(false), []);
+  return (
+    <VisibilityPanelRoot>
+      <IconButton
+        role="switch"
+        aria-checked={showFilter}
+        aria-controls={dialog ? undefined : id}
+        aria-label="Show filter panel"
+        onClick={() => setShowFilter(!showFilter)}
+      >
+        <Badge
+          color="primary"
+          variant="dot"
+          invisible={graph.visibility.size === 0}
+        >
+          {showFilter && !dialog ? <ChevronLeftIcon /> : <TuneIcon />}
+        </Badge>
+      </IconButton>
+      {dialog ? (
+        <Dialog open={showFilter} onClose={close} maxWidth="xl">
+          <VisibilityDialog graph={graph} close={close} dialog />
+        </Dialog>
+      ) : (
+        <Slide
+          direction="right"
+          in={showFilter}
+          id={id}
+          mountOnEnter
+          unmountOnExit
+        >
+          <Paper className="VisibilityPanel-drawer" elevation={4}>
+            <VisibilityDialog graph={graph} close={close} />
+          </Paper>
+        </Slide>
+      )}
+    </VisibilityPanelRoot>
+  );
+}
+export default observer(VisibilityPanel);
diff --git a/subprojects/frontend/src/graph/ZoomButtons.tsx b/subprojects/frontend/src/graph/ZoomButtons.tsx
new file mode 100644
index 00000000..83938cf4
--- /dev/null
+++ b/subprojects/frontend/src/graph/ZoomButtons.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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';
+import ToggleButton from '@mui/material/ToggleButton';
+import type { ChangeZoomCallback, SetFitZoomCallback } from './ZoomCanvas';
+export default function ZoomButtons({
+  changeZoom,
+  fitZoom,
+  setFitZoom,
+}: {
+  changeZoom: ChangeZoomCallback;
+  fitZoom: boolean;
+  setFitZoom: SetFitZoomCallback;
+}): JSX.Element {
+  return (
+    <Stack
+      direction="column"
+      p={1}
+      sx={{ position: 'absolute', bottom: 0, right: 0 }}
+    >
+      <IconButton aria-label="Zoom in" onClick={() => changeZoom(2)}>
+        <AddIcon fontSize="small" />
+      </IconButton>
+      <IconButton aria-label="Zoom out" onClick={() => changeZoom(0.5)}>
+        <RemoveIcon fontSize="small" />
+      </IconButton>
+      <ToggleButton
+        value="show-replace"
+        selected={fitZoom}
+        onClick={() => setFitZoom(!fitZoom)}
+        aria-label="Fit screen"
+        size="small"
+        className="iconOnly"
+      >
+        <CropFreeIcon fontSize="small" />
+      </ToggleButton>
+    </Stack>
+  );
+}
diff --git a/subprojects/frontend/src/graph/ZoomCanvas.tsx b/subprojects/frontend/src/graph/ZoomCanvas.tsx
new file mode 100644
index 00000000..0254bc59
--- /dev/null
+++ b/subprojects/frontend/src/graph/ZoomCanvas.tsx
@@ -0,0 +1,224 @@
+/*
+ * 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 { useResizeDetector } from 'react-resize-detector';
+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 type ChangeZoomCallback = (factor: number) => void;
+export type SetFitZoomCallback = (fitZoom: boolean) => void;
+export type FitZoomCallback = ((newSize?: {
+  width: number;
+  height: number;
+}) => void) &
+  ((newSize: boolean) => void);
+export default function ZoomCanvas({
+  children,
+  fitPadding,
+  transitionTime,
+}: {
+  children?: React.ReactNode | ((fitZoom: FitZoomCallback) => React.ReactNode);
+  fitPadding?: number;
+  transitionTime?: number;
+}): JSX.Element {
+  const fitPaddingOrDefault = fitPadding ?? ZoomCanvas.defaultProps.fitPadding;
+  const transitionTimeOrDefault =
+    transitionTime ?? ZoomCanvas.defaultProps.transitionTime;
+  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 [fitZoom, setFitZoom] = useState(true);
+  const fitZoomRef = useRef(fitZoom);
+  const makeTransition = useCallback(
+    (element: HTMLDivElement) =>
+      d3.select(element).transition().duration(transitionTimeOrDefault),
+    [transitionTimeOrDefault],
+  );
+  const fitZoomCallback = useCallback<FitZoomCallback>(
+    (newSize) => {
+      if (
+        !fitZoomRef.current ||
+        canvasRef.current === undefined ||
+        zoomRef.current === undefined ||
+        elementRef.current === undefined
+      ) {
+        return;
+      }
+      let width = 0;
+      let height = 0;
+      if (newSize === undefined || typeof newSize === 'boolean') {
+        const elementRect = elementRef.current.getBoundingClientRect();
+        const currentFactor = d3.zoomTransform(canvasRef.current).k;
+        width = elementRect.width / currentFactor;
+        height = elementRect.height / currentFactor;
+      } else {
+        ({ width, height } = newSize);
+      }
+      if (width === 0 || height === 0) {
+        return;
+      }
+      const canvasRect = canvasRef.current.getBoundingClientRect();
+      const factor = Math.min(
+        1.0,
+        (canvasRect.width - 2 * fitPaddingOrDefault) / width,
+        (canvasRect.height - 2 * fitPaddingOrDefault) / height,
+      );
+      const target =
+        newSize === false
+          ? d3.select(canvasRef.current)
+          : makeTransition(canvasRef.current);
+      zoomRef.current.transform(target, d3.zoomIdentity.scale(factor));
+    },
+    [fitPaddingOrDefault, makeTransition],
+  );
+  const setFitZoomCallback = useCallback<SetFitZoomCallback>(
+    (newFitZoom) => {
+      setFitZoom(newFitZoom);
+      fitZoomRef.current = newFitZoom;
+      if (newFitZoom) {
+        fitZoomCallback();
+      }
+    },
+    [fitZoomCallback],
+  );
+  const changeZoomCallback = useCallback<ChangeZoomCallback>(
+    (factor) => {
+      setFitZoomCallback(false);
+      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);
+    },
+    [makeTransition, setFitZoomCallback],
+  );
+  const onResize = useCallback(() => fitZoomCallback(), [fitZoomCallback]);
+  const { ref: resizeRef } = useResizeDetector({
+    onResize,
+    refreshMode: 'debounce',
+    refreshRate: transitionTimeOrDefault,
+  });
+  const setCanvas = useCallback(
+    (canvas: HTMLDivElement | null) => {
+      canvasRef.current = canvas ?? undefined;
+      resizeRef(canvas);
+      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])
+        .scaleExtent([1 / 32, 8]);
+      zoomBehavior.on(
+        'zoom',
+        (event: d3.D3ZoomEvent<HTMLDivElement, unknown>) => {
+          setZoom(event.transform);
+          if (event.sourceEvent) {
+            setFitZoomCallback(false);
+          }
+        },
+      );
+      d3.select(canvas).call(zoomBehavior);
+      zoomRef.current = zoomBehavior;
+    },
+    [transitionTimeOrDefault, setFitZoomCallback, resizeRef],
+  );
+  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}
+        >
+          {typeof children === 'function'
+            ? children(fitZoomCallback)
+            : children}
+        </Box>
+      </Box>
+      <ZoomButtons
+        changeZoom={changeZoomCallback}
+        fitZoom={fitZoom}
+        setFitZoom={setFitZoomCallback}
+      />
+    </Box>
+  );
+}
+ZoomCanvas.defaultProps = {
+  children: undefined,
+  fitPadding: 8,
+  transitionTime: 250,
+};
diff --git a/subprojects/frontend/src/graph/dotSource.ts b/subprojects/frontend/src/graph/dotSource.ts
new file mode 100644
index 00000000..5e0b44c8
--- /dev/null
+++ b/subprojects/frontend/src/graph/dotSource.ts
@@ -0,0 +1,340 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+import type {
+  NodeMetadata,
+  RelationMetadata,
+} from '../xtext/xtextServiceResults';
+import type GraphStore from './GraphStore';
+const EDGE_WEIGHT = 1;
+const CONTAINMENT_WEIGHT = 5;
+const UNKNOWN_WEIGHT_FACTOR = 0.5;
+function nodeName(graph: GraphStore, metadata: NodeMetadata): string {
+  const name = graph.getName(metadata);
+  switch (metadata.kind) {
+    case 'INDIVIDUAL':
+      return `<b>${name}</b>`;
+    default:
+      return name;
+  }
+}
+function relationName(graph: GraphStore, metadata: RelationMetadata): string {
+  const name = graph.getName(metadata);
+  const { detail } = metadata;
+  if (detail.type === 'class' && detail.abstractClass) {
+    return `<i>${name}</i>`;
+  }
+  if (detail.type === 'reference' && detail.containment) {
+    return `<b>${name}</b>`;
+  }
+  return name;
+}
+interface NodeData {
+  isolated: boolean;
+  exists: string;
+  equalsSelf: string;
+  unaryPredicates: Map<RelationMetadata, string>;
+  count: string;
+}
+function computeNodeData(graph: GraphStore): NodeData[] {
+  const {
+    semantics: { nodes, relations, partialInterpretation },
+  } = graph;
+  const nodeData = Array.from(Array(nodes.length)).map(() => ({
+    isolated: true,
+    exists: 'FALSE',
+    equalsSelf: 'FALSE',
+    unaryPredicates: new Map(),
+    count: '[0]',
+  }));
+  relations.forEach((relation) => {
+    const visibility = graph.getVisibility(relation.name);
+    if (visibility === 'none') {
+      return;
+    }
+    const { arity } = relation;
+    const interpretation = partialInterpretation[relation.name] ?? [];
+    interpretation.forEach((tuple) => {
+      const value = tuple[arity];
+      if (visibility !== 'all' && value === 'UNKNOWN') {
+        return;
+      }
+      for (let i = 0; i < arity; i += 1) {
+        const index = tuple[i];
+        if (typeof index === 'number') {
+          const data = nodeData[index];
+          if (data !== undefined) {
+            data.isolated = false;
+            if (arity === 1) {
+              data.unaryPredicates.set(relation, value);
+            }
+          }
+        }
+      }
+    });
+  });
+  partialInterpretation['builtin::exists']?.forEach(([index, value]) => {
+    if (typeof index === 'number' && typeof value === 'string') {
+      const data = nodeData[index];
+      if (data !== undefined) {
+        data.exists = value;
+      }
+    }
+  });
+  partialInterpretation['builtin::equals']?.forEach(([index, other, value]) => {
+    if (
+      typeof index === 'number' &&
+      index === other &&
+      typeof value === 'string'
+    ) {
+      const data = nodeData[index];
+      if (data !== undefined) {
+        data.equalsSelf = value;
+      }
+    }
+  });
+  partialInterpretation['builtin::count']?.forEach(([index, value]) => {
+    if (typeof index === 'number' && typeof value === 'string') {
+      const data = nodeData[index];
+      if (data !== undefined) {
+        data.count = value;
+      }
+    }
+  });
+  return nodeData;
+}
+function createNodes(graph: GraphStore, lines: string[]): void {
+  const nodeData = computeNodeData(graph);
+  const {
+    semantics: { nodes },
+    scopes,
+  } = graph;
+  nodes.forEach((node, i) => {
+    const data = nodeData[i];
+    if (data === undefined || data.isolated) {
+      return;
+    }
+    const classList = [
+      `node-${node.kind}`,
+      `node-exists-${data.exists}`,
+      `node-equalsSelf-${data.equalsSelf}`,
+    ];
+    if (data.unaryPredicates.size === 0) {
+      classList.push('node-empty');
+    }
+    const classes = classList.join(' ');
+    const name = nodeName(graph, node);
+    const border = node.kind === 'INDIVIDUAL' ? 2 : 1;
+    const count = scopes ? ` ${data.count}` : '';
+    lines.push(`n${i} [id="${node.name}", class="${classes}", label=<
+        <table border="${border}" cellborder="0" cellspacing="0" style="rounded" bgcolor="white">
+          <tr><td cellpadding="4.5" width="32" bgcolor="green">${name}${count}</td></tr>`);
+    if (data.unaryPredicates.size > 0) {
+      lines.push(
+        '<hr/><tr><td cellpadding="4.5"><table fixedsize="TRUE" align="left" border="0" cellborder="0" cellspacing="0" cellpadding="1.5">',
+      );
+      data.unaryPredicates.forEach((value, relation) => {
+        lines.push(
+          `<tr>
+              <td><img src="#${value}"/></td>
+              <td width="1.5"></td>
+              <td align="left" href="#${value}" id="${node.name},${
+                relation.name
+              },label">${relationName(graph, relation)}</td>
+            </tr>`,
+        );
+      });
+      lines.push('</table></td></tr>');
+    }
+    lines.push('</table>>]');
+  });
+}
+function compare(
+  a: readonly (number | string)[],
+  b: readonly number[],
+): number {
+  if (a.length !== b.length + 1) {
+    throw new Error('Tuple length mismatch');
+  }
+  for (let i = 0; i < b.length; i += 1) {
+    const aItem = a[i];
+    const bItem = b[i];
+    if (typeof aItem !== 'number' || typeof bItem !== 'number') {
+      throw new Error('Invalid tuple');
+    }
+    if (aItem < bItem) {
+      return -1;
+    }
+    if (aItem > bItem) {
+      return 1;
+    }
+  }
+  return 0;
+}
+function binarySerach(
+  tuples: readonly (readonly (number | string)[])[],
+  key: readonly number[],
+): string | undefined {
+  let lower = 0;
+  let upper = tuples.length - 1;
+  while (lower <= upper) {
+    const middle = Math.floor((lower + upper) / 2);
+    const tuple = tuples[middle];
+    if (tuple === undefined) {
+      throw new Error('Range error');
+    }
+    const result = compare(tuple, key);
+    if (result === 0) {
+      const found = tuple[key.length];
+      if (typeof found !== 'string') {
+        throw new Error('Invalid tuple value');
+      }
+      return found;
+    }
+    if (result < 0) {
+      lower = middle + 1;
+    } else {
+      // result > 0
+      upper = middle - 1;
+    }
+  }
+  return undefined;
+}
+function createRelationEdges(
+  graph: GraphStore,
+  relation: RelationMetadata,
+  showUnknown: boolean,
+  lines: string[],
+): void {
+  const {
+    semantics: { nodes, partialInterpretation },
+  } = graph;
+  const { detail } = relation;
+  let constraint: 'true' | 'false' = 'true';
+  let weight = EDGE_WEIGHT;
+  let penwidth = 1;
+  const name = graph.getName(relation);
+  let label = `"${name}"`;
+  if (detail.type === 'reference' && detail.containment) {
+    weight = CONTAINMENT_WEIGHT;
+    label = `<<b>${name}</b>>`;
+    penwidth = 2;
+  } else if (
+    detail.type === 'opposite' &&
+    graph.getVisibility(detail.opposite) !== 'none'
+  ) {
+    constraint = 'false';
+    weight = 0;
+  }
+  const tuples = partialInterpretation[relation.name] ?? [];
+  tuples.forEach(([from, to, value]) => {
+    const isUnknown = value === 'UNKNOWN';
+    if (
+      (!showUnknown && isUnknown) ||
+      typeof from !== 'number' ||
+      typeof to !== 'number' ||
+      typeof value !== 'string'
+    ) {
+      return;
+    }
+    const fromNode = nodes[from];
+    const toNode = nodes[to];
+    if (fromNode === undefined || toNode === undefined) {
+      return;
+    }
+    let dir = 'forward';
+    let edgeConstraint = constraint;
+    let edgeWeight = weight;
+    const opposite = binarySerach(tuples, [to, from]);
+    const oppositeUnknown = opposite === 'UNKNOWN';
+    const oppositeSet = opposite !== undefined;
+    const oppositeVisible = oppositeSet && (showUnknown || !oppositeUnknown);
+    if (opposite === value) {
+      if (to < from) {
+        // We already added this edge in the reverse direction.
+        return;
+      }
+      if (to > from) {
+        dir = 'both';
+      }
+    } else if (oppositeVisible && to < from) {
+      // Let the opposite edge drive the graph layout.
+      edgeConstraint = 'false';
+      edgeWeight = 0;
+    } else if (isUnknown && (!oppositeSet || oppositeUnknown)) {
+      // Only apply the UNKNOWN value penalty if we aren't the opposite
+      // edge driving the graph layout from above, or the penalty would
+      // be applied anyway.
+      edgeWeight *= UNKNOWN_WEIGHT_FACTOR;
+    }
+    lines.push(`n${from} -> n${to} [
+      id="${fromNode.name},${toNode.name},${relation.name}",
+      dir="${dir}",
+      constraint=${edgeConstraint},
+      weight=${edgeWeight},
+      xlabel=${label},
+      penwidth=${penwidth},
+      arrowsize=${penwidth >= 2 ? 0.875 : 1},
+      style="${isUnknown ? 'dashed' : 'solid'}",
+      class="edge-${value}"
+    ]`);
+  });
+}
+function createEdges(graph: GraphStore, lines: string[]): void {
+  const {
+    semantics: { relations },
+  } = graph;
+  relations.forEach((relation) => {
+    if (relation.arity !== 2) {
+      return;
+    }
+    const visibility = graph.getVisibility(relation.name);
+    if (visibility !== 'none') {
+      createRelationEdges(graph, relation, visibility === 'all', lines);
+    }
+  });
+}
+export default function dotSource(
+  graph: GraphStore | undefined,
+): [string, number] | undefined {
+  if (graph === undefined) {
+    return undefined;
+  }
+  const lines = [
+    'digraph {',
+    'graph [bgcolor=transparent];',
+    `node [fontsize=12, shape=plain, fontname="OpenSans"];`,
+    'edge [fontsize=10.5, color=black, fontname="OpenSans"];',
+  ];
+  createNodes(graph, lines);
+  createEdges(graph, lines);
+  lines.push('}');
+  return [lines.join('\n'), lines.length];
+}
diff --git a/subprojects/frontend/src/graph/parseBBox.ts b/subprojects/frontend/src/graph/parseBBox.ts
new file mode 100644
index 00000000..34df746b
--- /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
+ *
+ * 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..a580f5c6
--- /dev/null
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -0,0 +1,186 @@
+/*
+ * 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';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+function modifyAttribute(element: Element, attribute: string, change: number) {
+  const valueString = element.getAttribute(attribute);
+  if (valueString === null) {
+    return;
+  }
+  const value = parseInt(valueString, 10);
+  element.setAttribute(attribute, String(value + change));
+}
+function addShadow(
+  node: SVGGElement,
+  container: SVGRectElement,
+  offset: number,
+): void {
+  const shadow = container.cloneNode() as SVGRectElement;
+  // Leave space for 1pt stroke around the original container.
+  const offsetWithStroke = offset - 0.5;
+  modifyAttribute(shadow, 'x', offsetWithStroke);
+  modifyAttribute(shadow, 'y', offsetWithStroke);
+  modifyAttribute(shadow, 'width', 1);
+  modifyAttribute(shadow, 'height', 1);
+  modifyAttribute(shadow, 'rx', 0.5);
+  modifyAttribute(shadow, 'ry', 0.5);
+  shadow.setAttribute('class', 'node-shadow');
+  shadow.id = `${node.id},shadow`;
+  node.insertBefore(shadow, node.firstChild);
+}
+function clipCompartmentBackground(node: SVGGElement) {
+  // Background rectangle of the node created by the `<table bgcolor="white">`
+  // HTML element in dot. It was transformed into a rounded rect by `fixNodeBackground`.
+  const container = node.querySelector<SVGRectElement>('rect[fill="white"]');
+  // Background rectangle of the lower compartment created by the `<td bgcolor="green">`
+  // 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<SVGRectElement>('rect[fill="green"]');
+  // Make sure we provide traceability with IDs also for the border.
+  const border = node.querySelector<SVGRectElement>('rect[stroke="black"]');
+  if (container === null || compartment === null || border === 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})`);
+  // Enlarge the compartment to completely cover the background.
+  modifyAttribute(compartment, 'y', -5);
+  modifyAttribute(compartment, 'x', -5);
+  modifyAttribute(compartment, 'width', 10);
+  const isEmpty = node.classList.contains('node-empty');
+  // Make sure that empty nodes are fully filled.
+  modifyAttribute(compartment, 'height', isEmpty ? 10 : 5);
+  if (node.classList.contains('node-equalsSelf-UNKNOWN')) {
+    addShadow(node, container, 6);
+  }
+  container.id = `${node.id},container`;
+  compartment.id = `${node.id},compartment`;
+  border.id = `${node.id},border`;
+}
+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');
+    path.parentNode?.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}`,
+      );
+      polygon.parentNode?.replaceChild(polyline, polygon);
+    } else {
+      const rect = createRect(bbox, polygon);
+      polygon.parentNode?.replaceChild(rect, polygon);
+    }
+  });
+  clipCompartmentBackground(node);
+}
+function hrefToClass(node: SVGGElement) {
+  node.querySelectorAll<SVGAElement>('a').forEach((a) => {
+    if (a.parentNode === null) {
+      return;
+    }
+    const href = a.getAttribute('href') ?? a.getAttributeNS(XLINK_NS, 'href');
+    if (href === 'undefined' || !href?.startsWith('#')) {
+      return;
+    }
+    while (a.lastChild !== null) {
+      const child = a.lastChild;
+      a.removeChild(child);
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        const element = child as Element;
+        element.classList.add('label', `label-${href.replace('#', '')}`);
+        a.after(child);
+      }
+    }
+    a.parentNode.removeChild(a);
+  });
+}
+function replaceImages(node: SVGGElement) {
+  node.querySelectorAll<SVGImageElement>('image').forEach((image) => {
+    const href =
+      image.getAttribute('href') ?? image.getAttributeNS(XLINK_NS, 'href');
+    if (href === 'undefined' || !href?.startsWith('#')) {
+      return;
+    }
+    const width = image.getAttribute('width')?.replace('px', '') ?? '';
+    const height = image.getAttribute('height')?.replace('px', '') ?? '';
+    const foreign = document.createElementNS(SVG_NS, 'foreignObject');
+    foreign.setAttribute('x', image.getAttribute('x') ?? '');
+    foreign.setAttribute('y', image.getAttribute('y') ?? '');
+    foreign.setAttribute('width', width);
+    foreign.setAttribute('height', height);
+    const div = document.createElement('div');
+    div.classList.add('icon', `icon-${href.replace('#', '')}`);
+    foreign.appendChild(div);
+    const sibling = image.nextElementSibling;
+    // Since dot doesn't respect the `id` attribute on table cells with a single image,
+    // compute the ID based on the ID of the next element (the label).
+    if (
+      sibling !== null &&
+      sibling.tagName.toLowerCase() === 'g' &&
+      sibling.id !== ''
+    ) {
+      foreign.id = `${sibling.id},icon`;
+    }
+    image.parentNode?.replaceChild(foreign, image);
+  });
+}
+export default function postProcessSvg(svg: SVGSVGElement) {
+  // svg
+  //   .querySelectorAll<SVGTitleElement>('title')
+  //   .forEach((title) => title.parentElement?.removeChild(title));
+  svg.querySelectorAll<SVGGElement>('g.node').forEach((node) => {
+    optimizeNodeShapes(node);
+    hrefToClass(node);
+    replaceImages(node);
+  });
+  // Increase padding to fit box shadows for multi-objects.
+  const viewBox = [
+    svg.viewBox.baseVal.x - 6,
+    svg.viewBox.baseVal.y - 6,
+    svg.viewBox.baseVal.width + 12,
+    svg.viewBox.baseVal.height + 12,
+  ];
+  svg.setAttribute('viewBox', viewBox.join(' '));
+}